表单验证在接近尾声时停止工作
Form validation stops working near end
首先感谢您的帮助。
我有八个if语句来验证我的表单字段。前六个很好，但后两个不行（我已经评论了验证停止的地方），因为它只是重新加载页面，就像提交了表单一样。
有两件事我需要帮助。。。1） 为什么我的最后两个if语句不起作用，以及2）是否有比这更简单、不那么复杂、更高效、更好的验证方法？你能给我看看吗？
编写脚本
$("#myform").submit(function(){
// Variables
var fname=jQuery('#fname').val();
var emailval=jQuery('#email').val();
var mailformat = /^'w+(['.-]?'w+)*@'w+(['.-]?'w+)*('.'w{2,3})+$/;
var vemail=mailformat.test(emailval);
var phone = jQuery('#phone').val();
// ALL THREE FIELDS ARE INVALID
if ($.trim(fname).length == 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length == 0 || vemail==false)) {
// Set the border color to red
document.getElementById("fname").style.borderColor = "#E34234";
document.getElementById("email").style.borderColor = "#E34234";
document.getElementById("phone").style.borderColor = "#E34234";
// Define the error text
jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');
jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');
// Display the errors
jQuery('.name_error').show();
jQuery('.email_error').show();
jQuery('.phone_error').show();
return false;
}
// Name is valid (PHONE & EMAIL IS INVALID)
else if ($.trim(fname).length != 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length == 0 || vemail==false)) {
// Ensure the Name Field is styled correctly and the error is hidden
document.getElementById("fname").style.borderColor = "#ccc";
jQuery('.name_error').hide();
// Set the border color to red
document.getElementById("email").style.borderColor = "#E34234";
document.getElementById("phone").style.borderColor = "#E34234";
// Define the error text
jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');
jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');
// Display the errors
jQuery('.email_error').show();
jQuery('.phone_error').show();
return false;
}
// Phone is valid (NAME & EMAIL IS INVALID)
else if ($.trim(fname).length == 0 && $.trim(phone).length > 6 && ($.trim(emailval).length == 0 || vemail==false)) {
// Ensure the Phone Field is styled correctly and the error is hidden
document.getElementById("phone").style.borderColor = "#ccc";
jQuery('.phone_error').hide();
// Set the border color to red
document.getElementById("email").style.borderColor = "#E34234";
document.getElementById("phone").style.borderColor = "#E34234";
// Define the error text
jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');
// Display the errors
jQuery('.name_error').show();
jQuery('.email_error').show();
return false;
}
// Email is valid (NAME & PHONE IS INVALID)
else if ($.trim(fname).length == 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length != 0 && vemail != false)) {
// Ensure the Email Field is styled correctly and the error is hidden
document.getElementById("email").style.borderColor = "#ccc";
jQuery('.email_error').hide();
// Set the border color to red
document.getElementById("fname").style.borderColor = "#E34234";
document.getElementById("phone").style.borderColor = "#E34234";
// Define the error text
jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');
// Display the errors
jQuery('.name_error').show();
jQuery('.phone_error').show();
return false;
}
// Name is entered and Email is valid (PHONE IS INVALID)
else if ($.trim(fname).length != 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length != 0 && vemail != false)) {
// Ensure the Name & Email Fields are styled correctly and the errors are hidden
document.getElementById("fname").style.borderColor = "#ccc";
document.getElementById("email").style.borderColor = "#ccc";
jQuery('.name_error').hide();
jQuery('.email_error').hide();
// Set the border color to red
document.getElementById("phone").style.borderColor = "#E34234";
// Define the error text
jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');
// Display the errors
jQuery('.phone_error').show();
return false;
}
// Phone has more than 6 characters and Email is valid (NAME IS INVALID)
else if ($.trim(fname).length == 0 && ($.trim(phone).length != 0 || $.trim(phone).length > 6) && ($.trim(emailval).length != 0 && vemail != false)) {
// Ensure the Phone & Email Fields are styled correctly and the errors are hidden
document.getElementById("phone").style.borderColor = "#ccc";
document.getElementById("email").style.borderColor = "#ccc";
jQuery('.phone_error').hide();
jQuery('.email_error').hide();
// Set the border color to red
document.getElementById("fname").style.borderColor = "#E34234";
// Define the error text
jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
// Display the errors
jQuery('.name_error').show();
return false;
}
// *** HERE DOWN IS WHERE THINGS NO LONGER WORK AS THEY SHOULD ***
// Phone has more than 6 characters and Name is entered (EMAIL IS INVALID)
else if (($.trim(fname).length != 0 && $.trim(phone).length > 6) && ($.trim(emailval).length == 0 || vemail==false)) {
// Ensure the Name & Phone Fields are styled correctly and the errors are hidden
document.getElementById("name").style.borderColor = "#ccc";
document.getElementById("phone").style.borderColor = "#ccc";
jQuery('.name_error').hide();
jQuery('.phone_error').hide();
// Set the border color to red
document.getElementById("email").style.borderColor = "#E34234";
// Define the error text
jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email Address</span>');
// Display the errors
jQuery('.email_error').show();
alert(vemail);
return false;
}
// ALL FIELDS ARE GOOD
else if ($.trim(fname).length != 0 && $.trim(phone).length > 6 && ($.trim(emailval).length != 0 && vemail != false)) {
// Ensure all fields are styled correctly and errors are hidden
document.getElementById("name").style.borderColor = "#ccc";
document.getElementById("phone").style.borderColor = "#ccc";
document.getElementById("email").style.borderColor = "#ccc";
jQuery('.name_error').hide();
jQuery('.phone_error').hide();
jQuery('.email_error').hide();
alert("All is good. We're ready to submit!")
return false;
}
else {
// ALERT
alert("None of the validation is working");
return false;
}
});
HTML–只是与之相关的字段集…
<fieldset>
<h1 class="fs-title mt16 thick">HEADDER</h1>
<input type="text" id="fname" name="fname" placeholder="First Name" />
<div class="name_error"></div>
<input type="email" id="email" name="email" placeholder="What is your email address?" />
<div class="email_error"></div>
<input type="tel" id="phone" name="phone" placeholder="Phone Number (i.e. 5555551212)" />
<div class="phone_error"></div>
<label class="option-button uppercase thick"><input type="radio" name="contact" value="email" />Contact me by email</label>
<label class="option-button uppercase thick"><input type="radio" name="contact" value="phone" checked />Contact me by phone</label>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
您的代码达到最后两个else if，但下一行代码同时失败：
document.getElementById("name").style.borderColor = "#ccc";
因为标识符不存在，所以它应该是fname。控制台输出Cannot read property 'style' of null，由于代码失败，false不会返回，因此表单尝试正常提交，导致页面重新加载。
您可以使用控制台（在大多数浏览器中为F12）来查看这些错误。大多数人还会把你指向错误发生的那一行，以便进一步评估。当页面重新加载时，你需要勾选"保留日志"（在Chrome中这样说，在其他浏览器中可能有所不同）才能看到它们。
哇！
嘿，
您可以使用属性required和pattern。
<input type="text" id="example" name="example" required pattern="[A-Za-z]{3}"/>
我希望这能有所帮助，
Rhys
参考文献：
http://www.w3schools.com/tags/att_input_pattern.asphttp://www.w3schools.com/tags/att_input_required.asp
您的代码中有很多重复。肯定有更好的方法可以做到这一点。
像这样的东西怎么样：
var fields = [ {
"value": "First name",
"type": "text",
"validation": "not empty"
}, {
"value": "Email address",
"type": "text",
"validation": new RegExp(..)
}, {
"value": "Phone number",
"type": "text",
"validation": "not empty"
}, {
"value": "Contact",
"type": "option",
"values": [ "Contact me by email", "Contact me by phone" ]
"validation": "any"
} ];
然后根据此规范生成表单和验证规则。
相关文章：
- jQuery UI自动完成突然停止工作
- JavaScript打印功能使日历停止工作
- 下拉列表在使用z索引放置在前面后停止工作
- 由于响应中不存在“Access Control Allow Origin”标头，跨域请求停止工作
- 注入工厂时，Angular停止工作
- React Native DeviceEventEmitter键盘WillShow停止工作
- JavaScript在更改css时停止工作
- Chrome地理定位在更新后停止工作
- 重新启动jquery脚本后，角度停止工作
- twitter引导崩溃在第一次点击后停止工作
- 更新Wordpress和我的平滑滚动停止工作
- Hammer.js过了一段时间就停止工作了
- 应用程序在“关闭”之后停止工作(控制台中没有错误）;咕哝的构造”;
- 当我添加JavaScript时，链接按钮停止工作
- NetBeans调试突然停止工作
- 某些Magento后端管理按钮已停止工作
- 表单验证在接近尾声时停止工作
- 为什么在ASP.NET Ajax更新面板中执行任何操作后javascript元素都停止工作
- 在html文件中添加了多个外部javascript，其中一个停止工作
- jQuery插件在为元素分配id时停止工作
