我有一个表单,我通过Ajax使用jQuery加载。我也使用jQuery Validation来验证输入。当用户在输入字段中输入有效数据时,单击该按钮时,它会在输入下方显示红色错误框,其中没有文本。输入使用bootstrap输入组。该表单还使用jQuery验证插件通过Ajax提交表单。 以下是我用来验证的代码:
$(document.body).on('click', '#submit-form-button', function() {
$("#form1").validate({
submitHandler: function(form) {
// Loading State
var submitButton = $('#submit-form-button');
submitButton.button("loading");
// Ajax Submit
$.ajax({
type: "POST",
url: "submit-form.php",
data: {
"input1": $("#form1 #input1").val(),
},
dataType: "json",
success: function(data) {
if (data.response == "success") {
//SHOW SUCCESS
// Reset Form
$("#form1 .form-control")
.val("")
.blur()
.parent()
.removeClass("has-success")
.removeClass("has-error")
.find("label.error")
.remove();
} else {
//SHOW ERROR
}
},
error: function(data) {
console.log(data);
},
complete: function() {
submitButton.button("reset");
}
});
},
rules: {
input1: {
required: true,
email: true
}
},
highlight: function(element, errorClass) {
// Do nothing
},
success: function(element) {
$(element)
.parent()
.removeClass("has-error")
.removeClass("alert")
.removeClass("alert-danger")
.addClass("has-success")
.find("label.error")
.remove();
},
errorPlacement: function(error, element) {
if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
errorElement: "div",
errorClass: "alert alert-danger"
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>
<form id="form1" method="post" action="submit-form.php">
<div>
<label class="control-label sr-only" for="input1">Input 1</label>
<div class="input-group input-group-lg">
<input type="email" class="form-control" id="input1" name="input1" placeholder="Enter Your Email Address">
<span class="input-group-btn">
<button class="btn btn-blue" type="submit" id="submit-form-button" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> SENDING">SEND</button>
</span>
</div>
</div>
</form>