0
我在同一个网页上有两种表单，但我的验证脚本不起作用，即使所有输入名称都不同，表单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>希望有人能帮助我。
选择器'“：input”将对所有输入字段执行操作，而不管包含表单。我建议你在表单id前加上你的选择器，就像这个'$（“＃formride：input”）' 这将确保验证和css类被应用到正确的元素。 – Chris 2014-11-03 11:25:58
嗨克里斯。 谢谢，这个伎俩。 – pth 2014-11-03 13:56:47
你可以在下面添加标记我的答案为已接受的请愿书吗？谢谢 – Chris 2014-11-03 14:45:35