[英]How to validate a modal popup form before submission
I have HTML code like this 我有这样的HTML代码
HTML: HTML:
<form id="online_booking" method="POST" action="book.php" name="former">
<div id="book_form">
<p>
<label for="z_name">Name:<span class="red"> *</span></label>
<input type="text" placeholder="ENTER NAME.." name="z_name" required>
</p>
<p>
<label for="z_email">EMAIL:<span class="red"> *</span></label>
<input type="email" placeholder="ENTER EMAIL.." name="z_email" required>
</p>
<p>
<label for="z_subject">PHONE:<span class="red"> *</span> </label>
<input type="tel" placeholder="ENTER PHONE.." name="z_subject" required>
</p>
</form>
and jQuery: 和jQuery:
$(document).ready(function() {
$('#book_form').dialog({
autoOpen: true,
height: 375,
width: 350,
modal: true,
buttons: [
{
text: "Cancel",
click: function() {
$(this).dialog("close");
}},
{
text: "Submit",
click: function() {
$('#online_booking').submit();
}}
]
});
});
How can I validate the HTML fields as there is no submit button on the form? 由于表单上没有提交按钮,如何验证HTML字段? In the jQuery code, I created 2 buttons(cancel & submit) but do not know how I would stop the form from submitting if the HTML fields are not properly entered. 在jQuery代码中,我创建了2个按钮(取消并提交),但是如果HTML字段输入不正确,我不知道如何阻止表单提交。
You would simply alter your click
function like so by creating your own validation function that returns true
or false
: 您只需创建返回true
或false
的验证函数,就可以像这样简单地更改click
函数:
click: function ()
{
if ( someValidationFunction() )
$('#online_booking').submit();
}
This one is a basic example, but works if you're just checking for blanks: 这是一个基本示例,但仅在检查空白时可用:
$(document).ready(function () {
$('#book_form').dialog({
autoOpen: true,
height: 375,
width: 350,
modal: true,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
},
{
text: "Submit",
click: function () {
if (valid()) { //Check for Valid
$('#online_booking').submit();
}
else {
alert("Invalid");
}
}
}
]
});
});
var valid = function () { //Validation Function - Sample, just checks for empty fields
var valid;
$("input").each(function () {
if ($(this).val() === "") {
var a = $(this).val();
valid = false;
}
});
if (valid !== false) {
return true;
}
else {
return false;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.