表单已发送,但验证有错误
Form sent but validation has error
我的表单工作不正常。尽管有错误,它仍然能够通过。Errflag为1,但它指向"0"。如果有人能给我们一些启示,请感激。
JSFiddle:https://jsfiddle.net/rezasan/xxqtuc7d/
HTML
<form id="contact_form">
<div class="medium-6 columns">
<input type="hidden" name="sourcepage" value="Index Page">
<input type="text" placeholder="NAME" name="name" id="name" required />
<input type="email" placeholder="EMAIL" name="email" id="email" required/>
<input type="text" placeholder="TEL" name="phone" id="phone" required/>
<select name="services" id="serviceslist">
<option value="services" selected>SERVICES</option>
<option value="botox">Botox</option>
<option value="filler">Filler</option>
<option value="Ultherapy">Ultherapy</option>
<option value="coolsculpting">CoolSculpting</option>
<option value="threadlift">Thread Lift</option>
<option value="others">Others</option>
</select>
<div class="errtext"></div>
</div>
<div class="medium-6 columns">
<textarea rows="6" cols="55" name="message" id="message" placeholder="Please enter your enquiries"></textarea>
<input type="submit" style="float:right;" id="submit" name="submit" class="formelement-submit">
</div>
</form>
JAVASCRIPT
function trimStr (str) {
return str.replace(/^'s's*/, '').replace(/'s's*$/, '');
}
function checkTFieldValue(target,value,errorclass) {
if(trimStr($(target).val()) == value) {
$(target).addClass(errorclass);
return 1;
} else{
return 0;
}
}
function checkSFieldValue(target,value,errorclass) {
if(value == "SERVICES") {
$(target).addClass(errorclass);
return 1;
} else{
return 0;
}
}
function checkEmailValue(target,value,errorclass) {
var err = 0;
var emailReg = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
if(trimStr($(target).val()) == value) {
$(target).addClass(errorclass);
err = 1;
} else if(!emailReg.test($(target).val())) {
$(target).addClass(errorclass);
err = 1;
}
return err;
}
$('#contact_form').append('<input type="hidden" name="jsauth" value="dryga-f"/>');
$('.formelement-submit').click(function(e){
e.preventDefault();
e.stopPropagation();
var errflag = 0;
var counter = 0;
$('.formerror').removeClass('formerror');
$('.errtext').empty();
var e = document.getElementById("serviceslist");
var strUser = e.options[e.selectedIndex].text;
errflag = checkTFieldValue('#name','','formerror');
errflag = checkEmailValue('#email','','formerror');
errflag = checkTFieldValue('#phone','','formerror');
errflag = checkSFieldValue('#serviceslist',strUser,'formerror');
errflag = checkTFieldValue('#message','','formerror');
if(errflag == 1){
$('.errtext').html('<p>*Please fill in all the required fields</p>');
}
if(errflag == 0){
$('.errtext').html('No error');
}
});
如果#message
有效,则用0
覆盖所有其他内容。
您需要+=
errflag
并检查>
:-
errflag += checkTFieldValue('#name','','formerror');
errflag += checkEmailValue('#email','','formerror');
errflag += checkTFieldValue('#phone','','formerror');
errflag += checkSFieldValue('#serviceslist',strUser,'formerror');
errflag += checkTFieldValue('#message','','formerror');
if(errflag > 0){
$('.errtext').html('<p>*Please fill in all the required fields</p>');
}
else {
$('.errtext').html('No error');
}
此外,正如@MarcoScapbbiolo建议的那样,使用submit
而不是click
。
使用表单时,最好将验证处理程序附加到表单的提交事件中,而不是单击提交按钮。因为表单还有其他提交方式,比如在输入时按enter键。
更改
$('.formelement-submit').click(
至
$('#contact_form').on('submit',
它在这个小提琴中工作
相关文章:
- jQuery在输入下验证post错误消息
- 回复'js'仅当请求有错误时(否则使用html)
- JavaScript表单验证-“;“错误”;不按需要工作
- 表单已发送,但验证有错误
- 如果文件不存在,fs.watch是否有错误处理程序
- Javascript表单验证-jsFiddle错误
- Sequelize.js中获取验证器错误
- Meteor上有错误的同步问题
- jquery验证插件-错误删除
- 表单验证:如果有错误,不要't使手风琴动起来
- W3 用 1 行 JavaScript 代码验证 html 错误
- jQuery 验证显示错误块突出显示
- 我有错误文档.注册元素未被细化
- AngularJS 表单验证 - 类型错误:无法设置未定义的属性“整数”
- 如何转换为特定于 json 的类 c#?我有错误
- 新鲜的MVC 3项目给了我奇怪的不显眼的验证脚本错误
- Page_ClientValidate返回 false,但没有一个验证器有错误
- Jquery 验证器 - 表单被保存但有错误
- Jquery验证,如果有错误,我如何运行自定义代码
- 美元.后验证表单字段和块提交是有错误