jquery validate 二选一,错误提示在一处

张映 发表于 2012-11-13

分类目录: nodejs/vue/js/jquery

标签:, ,

有一同事对jquery validate这个插件不熟,实现多处报错信息在一处,并且还有二选一的情况,二个输入框,有一个输入就算通过。groups可以把多处报错放到一处,depends可以解决多选一的情况。下面举个例子,demo

以下是部分代码,全部代码看上面的例子。

    $("#myform").validate({
      groups: {
        username: "fname lname"   //username定义的组名,fname lname是输入框的名子,可以看上面的demo
      },
      errorPlacement: function(error, element) {  //错误提示在什么地方
         if (element.attr("name") == "fname" || element.attr("name") == "lname" ){
           error.insertAfter("#lastname");    //如果是fname和lname呢,就#lastname后面
         }else{
           error.insertAfter(element);
         }
       },
       rules:{
            fname:{
                required: {
                    depends:function(){ //二选一
                        return ($('input[name=lname]').val().length <= 0);
                    }
                }
            },
            lname:{
                required: {
                    depends:function(){ //二选一
                        return ($('input[name=fname]').val().length <= 0);
                    }
                }
            }
        },
        messages:{ //提示报错
            fname:"first name or last name at least one",
            lname:"first name or last name at least one"
        },
       debug:true
     });

==================上面是js==============================

<body style="margin-left:500px;margin-top:100px;">
<div style="font-size:22px;">test</div><br>
  <form id="myform" method="post">
  <label>Your Name</label>
  <input name="fname" value="" />
  <input name="lname" id="lastname" />
  <br/>
  <input type="submit" value="Submit"/>
</form>
</body>

如果对插件jquery validate这个插件很熟的话,可以看一下jquery.validate.js,方法里面都有。



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1483.html

1 条评论

  1. sqj 留言

    你好,我想请教下面的问题,

    addWarnIntervals元素的remote验证会取决于addMaxWarnTimes元素的值,如果第一次验证addWarnIntervals失败,提示错误信息,根据错误信息修改了addMaxWarnTimes的值,使addWarnIntervals的值变得合理了,但是之前addWarnIntervals的验证是不通过的,现在改了addMaxWarnTimes的值并没有触发到addWarnIntervals的验证,因此表单不能提交,我想解决这个问题,应该怎么做呀??

留下评论

留下评论
  • (必需)
  • (必需) (will not be published)
  • (必需)   9X3=?