我试图建立一个与BootstrapValidator对此我以非常有效的新的长期形式。
我最大的问题是，如果一个字段是不正确它标志着ALL与即使成功复选标记留在红色着色字段。 形态正常提交，但可视确认是什么，似乎很关闭。
在行动中看到的形式....你可以真正看到问题，如果您单击什么也没有填写提交，然后进行正确填写进去。 http://chelseaporter.com/APSoPC/adoptForm3.php这里是我的HTML代码和我的JavaScript代码段。 谢谢大家！
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Name</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Full Name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="email">Email Address</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="email" name="email" placeholder="Your email address" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="address">Street Address</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="address" name="address" placeholder="Your Street Address">
</div>
</div>
<!--many more fields)-->
<div class="form-group">
<div class="col-md-6 col-md-offset-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div><!-- closes panel Body-->
$(document).ready(function () {
var validator = $("#adoption-form").bootstrapValidator({
//live: 'disabled',
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields : {
name :{
validators : {
notEmpty : {
message : "Please provide your name."
},
stringLength: {
min : 4,
max: 35,
message: "Name must be between 4 and 35 characters long"
},
}//end validators
},
email :{
validators : {
notEmpty : {
message : "Please provide an email address"
},
regexp: {
regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
message: 'The value is not a valid email address'
}
}//end validators
},
address : {
validators : {
notEmpty : {
message: "Address is required"
}
}//end validators
},
city : {
validators : {
notEmpty : {
message: "City is required"
}
}//end validators
},
state : {
validators : {
notEmpty : {
message: "State is required"
}
}//end validators
},
zip : {
validators : {
notEmpty : {
message: "Zip is required"
}
}//end validators
},
years : {
validators : {
notEmpty : {
message: "Years at current address is required"
},
numeric : {
message: "Valid number of years lived at current address is required (only numbers)"
}
}//end validators
},
hPhone : {
validators : {
notEmpty : {
message: "Home phone is required. If you only have one phone please enter that number for Home Phone AND Alt Phone."
},
phone : {
country: 'US',
message: "Valid phone number is required (only numbers)"
}
}//end validators
},
altPhone : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
dNumber : {
validators : {
notEmpty : {
message: "Driver's License number is required"
},
numeric : {
message: "Valid Driver's License number is required (only numbers)"
}
}//end validators
},
dState : {
validators : {
notEmpty : {
message: "Driver's License state is required"
}
}//end validators
},
ePhone : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
hType : {
validators : {
notEmpty : {
message: "Home Type required."
}
}//end validators
},
hStatus : {
validators : {
notEmpty : {
message: "Home Status Required"
}
}//end validators
},
lNumber : {
validators : {
phone : {
country: 'US',
message: "Valid phone number is required"
}
}//end validators
},
student : {
validators : {
notEmpty : {
message: "Please answer if you are a student."
}
}//end validators
},
} //end ALL validators
});
validator.on("success.form.bv", function (e) {
if (data.fv.getInvalidFields().length > 0) { // There is invalid field
data.fv.disableSubmitButtons(true);
}
e.preventDefault();
$("#adoption-form").addClass("hidden");
$("#confirmation").removeClass("hidden");
var $form = $(e.target),
fv = $form.data('bootstrapValidator');
});
//process the form
$("#adoption-form").submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'address' : $('input[name=address]').val(),
'city' : $('input[name=city]').val(),
'state' : $('select[name=state]').val(),
'zip' : $('input[name=zip]').val(),
'years' : $('input[name=years]').val(),
'hPhone' : $('input[name=hPhone]').val(),
'altPhone' : $('input[name=altPhone]').val(),
'dNumber' : $('input[name=dNumber]').val(),
'dState' : $('input[name=dState]').val(),
'employer' : $('input[name=employer]').val(),
'ePhone' : $('input[name=ePhone]').val(),
'hType' : $('select[name=hType]').val(),
'hStatus' : $('select[name=hStatus]').val(),
'lName' : $('input[name=lName]').val(),
'LNumber' : $('input[name=LNumber]').val(),
'student' : $('select[name=student]').val(),
'sName' : $('input[name=sName]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
console.log(formData);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
console.log(formData);
});
});
