在同一页面上验证两个表单(Validation of two forms on same page)
我在同一个网页上有两个表单，但我的验证脚本不起作用，即使所有输入名称都不同，表单ID也不同。
小提琴
$(document).ready(function () {
// Place ID's of all required fields here.
required = ["namebud", "tlfbud", "budbud"];
// If using an ID other than #email or #error then replace it here
email = $("#emailbud");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please write";
emailerror = "Please write email";
$("#formbud").submit(function () {
//Validate required fields
for (i = 0; i < required.length; i++) {
var input = $('#' + required[i]);
if ((input.val() === "") || (input.val() == emptyerror)) {
input.addClass("needsfilled");
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("needsfilled");
}
}
// Validate the e-mail.
if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("needsfilled");
email.val(emailerror);
}
//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needsfilled")) {
return false;
} else {
errornotice.hide();
$(this).hide();
$(".result").show();
return true;
}
});
// Clears any fields in the form when the user clicks on them
$(":input").focus(function () {
if ($(this).hasClass("needsfilled")) {
$(this).val("");
$(this).removeClass("needsfilled");
}
});
});
$(document).ready(function () {
// Place ID's of all required fields here.
required = ["messageride", "nameride", "tlfride"];
// If using an ID other than #email or #error then replace it here
email = $("#emailride");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please write";
emailerror = "Please write email";
$("#formride").submit(function () {
//Validate required fields
for (i = 0; i < required.length; i++) {
var input = $('#' + required[i]);
if ((input.val() === "") || (input.val() == emptyerror)) {
input.addClass("needsfilled");
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("needsfilled");
}
}
// Validate the e-mail.
if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("needsfilled");
email.val(emailerror);
}
//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needsfilled")) {
return false;
} else {
errornotice.hide();
$(this).hide();
$(".result").show();
return true;
}
});
// Clears any fields in the form when the user clicks on them
$(":input").focus(function () {
if ($(this).hasClass("needsfilled")) {
$(this).val("");
$(this).removeClass("needsfilled");
}
});
});
input.needsfilled, textarea.needsfilled {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form method="post" action="/mailboffer" id="formbud">
<input type="text" name="namebud" id="namebud" placeholder="name" value="" />
<input type="text" name="emailbud" id="emailbud" placeholder="mail" value="" />
<input type="text" name="tlfbud" id="tlfbud" placeholder="tel" value="" />
<input type="text" name="bud" id="budbud" placeholder="offer" value="" />
<textarea name="messagebud" placeholder="comment"></textarea>
<input type="submit" class="button darkblue bud" name="submit" value="Send" />
</form>
<br/>
<form method="post" action="/mailride" id="formride">
<input type="text" name="nameride" id="nameride" placeholder="name" value="" />
<input type="text" name="emailride" id="emailride" placeholder="mail" value="" />
<input type="text" name="tlfride" id="tlfride" placeholder="trl" value="" />
<textarea name="messageride" id="messageride" placeholder="message"></textarea>
<input type="submit" class="button darkblue ride" name="submit" value="Send" />
</form>
希望有人可以帮助我。
I have two forms on the same webpage, but my validation script dosen't work, even all input names are different and the form id is also different.
Fiddle
$(document).ready(function () {
// Place ID's of all required fields here.
required = ["namebud", "tlfbud", "budbud"];
// If using an ID other than #email or #error then replace it here
email = $("#emailbud");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please write";
emailerror = "Please write email";
$("#formbud").submit(function () {
//Validate required fields
for (i = 0; i < required.length; i++) {
var input = $('#' + required[i]);
if ((input.val() === "") || (input.val() == emptyerror)) {
input.addClass("needsfilled");
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("needsfilled");
}
}
// Validate the e-mail.
if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("needsfilled");
email.val(emailerror);
}
//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needsfilled")) {
return false;
} else {
errornotice.hide();
$(this).hide();
$(".result").show();
return true;
}
});
// Clears any fields in the form when the user clicks on them
$(":input").focus(function () {
if ($(this).hasClass("needsfilled")) {
$(this).val("");
$(this).removeClass("needsfilled");
}
});
});
$(document).ready(function () {
// Place ID's of all required fields here.
required = ["messageride", "nameride", "tlfride"];
// If using an ID other than #email or #error then replace it here
email = $("#emailride");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please write";
emailerror = "Please write email";
$("#formride").submit(function () {
//Validate required fields
for (i = 0; i < required.length; i++) {
var input = $('#' + required[i]);
if ((input.val() === "") || (input.val() == emptyerror)) {
input.addClass("needsfilled");
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("needsfilled");
}
}
// Validate the e-mail.
if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("needsfilled");
email.val(emailerror);
}
//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needsfilled")) {
return false;
} else {
errornotice.hide();
$(this).hide();
$(".result").show();
return true;
}
});
// Clears any fields in the form when the user clicks on them
$(":input").focus(function () {
if ($(this).hasClass("needsfilled")) {
$(this).val("");
$(this).removeClass("needsfilled");
}
});
});
input.needsfilled, textarea.needsfilled {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form method="post" action="/mailboffer" id="formbud">
<input type="text" name="namebud" id="namebud" placeholder="name" value="" />
<input type="text" name="emailbud" id="emailbud" placeholder="mail" value="" />
<input type="text" name="tlfbud" id="tlfbud" placeholder="tel" value="" />
<input type="text" name="bud" id="budbud" placeholder="offer" value="" />
<textarea name="messagebud" placeholder="comment"></textarea>
<input type="submit" class="button darkblue bud" name="submit" value="Send" />
</form>
<br/>
<form method="post" action="/mailride" id="formride">
<input type="text" name="nameride" id="nameride" placeholder="name" value="" />
<input type="text" name="emailride" id="emailride" placeholder="mail" value="" />
<input type="text" name="tlfride" id="tlfride" placeholder="trl" value="" />
<textarea name="messageride" id="messageride" placeholder="message"></textarea>
<input type="submit" class="button darkblue ride" name="submit" value="Send" />
</form>
Hope somebody can help me out.
最满意答案
选择器“：input”将作用于所有输入字段，而不管包含的形式如何。 我建议你在表单id之前添加你的选择器，就像这个$（“＃formride：input”）这将确保验证和css类应用于正确的元素
The selector ":input" will act on all input fields, regardless of the containing form. I would suggest you prepend your selector with the form id as well like this $("#formride :input") This will ensure that the validation and css classes are applied to the correct elements
更多推荐
发布评论