一个验证消息用于多个字段 [英] One validation message for multiple fields

问题描述

有没有一种方法可以验证此表单中的三个电话号码字段，而只有有一个错误信息的组？

表格

 <表单ID =mFormname =form> 
< div class =field right> 
< label class =labelStdid =phoneNumber>电话号码*< / label> 
< input name =txtPhone1type =textmaxlength =3id =txtPhone1class =small-phonename =txtPhone1Onchange =Tab（this，'txtPhone2'） ; /> 
< input name =txtPhone2type =textmaxlength =3id =txtPhone2class =small-phonename =txtPhone2Onchange =Tab（this，'txtPhone3'） ; /> 
< input name =txtPhone3type =textmaxlength =4id =txtPhone3class =small-phonename =txtPhone3/> 
< / div> 
 
< button type =submitid =btn_submitclass =button-black right>发送< / button> 
< / form> 
  

脚本（使用jquery验证）

 < script type =text / javascript> 
 $（＃mForm）。validate（{
 
 onfocusout：false，
 focuseInvalid：false，
 onkeyup：false，
 
规则：{
 
 txtPhone1：{
 required：true，
 digits：true，
 minlength：3，
 maxlength：3 
 }，
 txtPhone2：{
 required：true，
 digits：true，
 minlength：3，
 maxlength：3 
}，
 txtPhone3：{
 required：true，
 digits：true，
 minlength：4，
 maxlength：4 
} 
}，
 
消息：{
 
 txtPhone1：您的电话号码是必需的。，
 txtPhone2：您的电话号码是必需的。，
 txtPhone3：您的电话号码是必需的。
} 
 
 
}）; 
 
 $（＃mForm）。submit（function（）{
 
 if（$（this）.valid（））{
 
 form.submit（）; 
 
} 
 
 else {} 
 
}）; 
< / script> 
  

解决方案

您需要使用 groups 选项 ...

< blockquote>

指定错误消息的分组。一个组由一个任意的
组名作为键和一个空格分隔的元素名列表作为
的值。

  groups：{error_platform}使用errorPlacement控制群组消息的位置。 
 someArbitraryName：txtPhone1 txtPhone2 txtPhone3
} 
  

： http://jsfiddle.net/3RFsa/

Sidenote ：

关于您的提交处理程序...

  $（＃mForm）。submit（function（）{
 if（$（this）.valid （））{
 form.submit（）; 
} 
 ... 
  

这是完全多余和不必要的，所以我会完全删除它。默认情况下，插件会自动提交表单，如果/当它有效。如果您想要做某件事除了 submit（）之外，你可以使用插件的 submitHandler 回调函数，如果你需要做一些事情当表单失败时使用插件的 invalidHandler 回调函数。

I'm having a problem with jQuery validation and could use some suggestions.

Is there a way I can validate the three Phone Number fields in this form while only having one error message for the group? Any help is greatly appreciated.

Form

<form id="mForm" name="form">
<div class="field right">
  <label class="labelStd" id="phoneNumber">Phone Number*</label>
  <input name="txtPhone1" type="text" maxlength="3" id="txtPhone1" class="small-phone" name="txtPhone1" Onchange="Tab(this, 'txtPhone2');" />
  <input name="txtPhone2" type="text" maxlength="3" id="txtPhone2" class="small-phone" name="txtPhone2" Onchange="Tab(this, 'txtPhone3');" />
  <input name="txtPhone3" type="text" maxlength="4" id="txtPhone3" class="small-phone" name="txtPhone3" />
</div>

<button type="submit" id="btn_submit" class="button-black right">SEND</button>
</form>

Script (with jquery validate)

<script type="text/javascript">
$("#mForm").validate({

onfocusout:false,
focuseInvalid:false,
onkeyup:false,

rules: {

    txtPhone1:{
            required: true,
            digits: true,
            minlength: 3,
            maxlength: 3
        },
    txtPhone2:{
            required: true,
            digits: true,
            minlength: 3,
            maxlength: 3
        },
    txtPhone3:{
            required: true,
            digits: true,
            minlength: 4,
            maxlength: 4
        }
    },

messages: {

    txtPhone1: "Your phone number is required.",
    txtPhone2: "Your phone number is required.",
    txtPhone3: "Your phone number is required."
}


  });

  $("#mForm").submit(function(){

if($(this).valid()){

form.submit();

}

else{ }

 });
</script>

解决方案

You need to use the groups option...

Specify grouping of error messages. A group consists of an arbitrary group name as the key and a space separated list of element names as the value. Use errorPlacement to control where the group message is placed.

groups:  {
    someArbitraryName: "txtPhone1 txtPhone2 txtPhone3"
}

Generic Demo: http://jsfiddle.net/3RFsa/

Sidenote:

Regarding your submit handler...

$("#mForm").submit(function(){
    if($(this).valid()){
        form.submit();
    }
...

It's totally superfluous and unnecessary, so I would remove it entirely. By default, the plugin will automatically submit the form only if/when it's valid. If you'd like to do something else in addition to the submit(), you can use the plugin's submitHandler callback function. If you need to do something when the form fails validation, use the plugin's invalidHandler callback function.

这篇关于一个验证消息用于多个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！