我有一个向Node Js发出请求的表单，在提交时 - 数据保存在MongoDB中。 我正在尝试使用Jquery Validate.js验证表单，当输入错误的值时出现 - 出现错误消息 - 但是当表单有效时 - 它会保持重定向到操作URL ...并且通过这样做 - 不显示发布成功消息。
这是我的js文件：
$(document).ready(function () {
toastr.options = {
"debug": false,
"positionClass": "toast-top-full-width",
"onclick": null,
"fadeIn": 300,
"fadeOut": 100,
"timeOut": 5000,
"extendedTimeOut": 1000
};
jQuery.validator.addMethod("intlTelNumber", function (value, element) {
return this.optional(element) || $(element).intlTelInput("isValidNumber");
}, function () {
if (toastr.warning("Warning")) {
toastr.clear(getLastToast());
}
});
jQuery.validator.addMethod("isInt", function (value, element) {
console.log(this.optional(element));
console.log(value);
console.log(element);
return this.optional(element) || !isNaN$(element);
});
var options = {
autoPlaceholder: true,
preferredCountries: ['al']
};
$("#phone").intlTelInput(options);
$('#submit').click(function () {
$("#form").validate({
rules: {
"email": {
required: true,
}, "phone": {
required: true,
isInt: true
}, "textarea": {
}, "country": {
}
},
messages: {
"email": {
required: function () {
toastr.warning("Email is invalid")
}
},
"phone": {
required: function () {
toastr.warning("phone is invalid")
}
}
}
});
if ($('#form').valid()) {
var data = {
email: $('input[name="email"]').val(),
select: $('#exampleFormControlSelect1').val(),
phone: $('input[name="phone"]').val(),
country: $("#phone").intlTelInput("getSelectedCountryData").iso2,
textarea: $('textarea').val()
}
$.post({
data: data,
url: 'http://localhost:3000/endpoint',
success: function (data) {
toastr.success("Data Saved");
}
});
}
return false;
});
});
这是Html
<form id="form" method="post" action="/endpoint">
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" name="email"
placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example
select</label>
<select class="form-control" id="exampleFormControlSelect1"
name="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="phone"> multiple select</label>
<input id="phone" class="form-control" type="tel"
name="phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example
textarea</label>
<textarea class="form-control" name="textarea" rows="3">
</textarea>
</div>
<input type="submit" class="btn btn-primary" id="submit">
</form>
这是我第一次尝试使用submitHandler
$("#form").validate({
rules: {
"email": {
required: true,
}, "phone": {
required: true,
isInt: true
}, "textarea": {
}, "country": {
}
},
messages: {
"email": {
required: function () {
toastr.warning("Email is invalid")
}
},
"phone": {
required: function () {
toastr.warning("phone is invalid")
}
}
},
submitHandler: function (form) { // for demo
var data = {
email: $('input[name="email"]').val(),
select: $('#exampleFormControlSelect1').val(),
phone: $('input[name="phone"]').val(),
country: $("#phone").intlTelInput("getSelectedCountryData").iso2,
textarea: $('textarea').val()
};
$.post({
data: data,
url: 'http://localhost:3000/endpoint',
success: function (data) {
toastr.success("Data Saved");
}
});
return false; // for demo
}
});