DIV 上的 jQuery 验证插件

IT技术 javascript jquery jquery-validate
2021-03-03 10:39:08

我正在尝试在 div 上使用验证插件,如对这个问题的回答所示

<script type="text/javascript">
  $("#pseudoForm").validate({
    onfocusout:true,
    rules:{
      first_name:"required",
      last_name:"required"
    }
  });
</script>
<!-- whatever -->
<div id="pseudoForm">
  <input type="text" name="first_name"/>
  <input type="text" name="last_name"/>
</div>

我所有的都在一个表格中。

我在不同的浏览器上收到一堆不同的错误。

  • Firefox:未定义的验证器
  • IE8:“设置”为空或不是对象
  • Chrome:无法读取未定义的属性“设置”

任何帮助表示赞赏!

5个回答

这不是您想听到的答案,但另一个答案是不正确的(发布时可能是正确的,但自那时以来,jQuery 验证插件发生了几项主要更改)。

验证插件(目前)被设计为适用于<form>,并且仅适用<form>. 您还可以注意到所有插件文档都引用了一个表单,而不是任何其他通用容器。

插件本身在validator.currentForm内部跟踪,它指this的是传入的选择器、获取.elements等的 ......它真的不会以任何其他方式工作,而不是当前版本的编写方式。

总体溶液/替换的方法在这里:呼叫.validate()的上<form>元件(jQuery的包装为它相当)直接,没有任何其它容器。如果您需要划分您的<form>使用<fieldset>元素,如果您不想验证用户不可见的输入字段,则可能使用中的ignore: ':hidden'选项.validate()

嗨,我得到了完全相同的错误,但我没有调用任何验证方法......有什么线索为什么仍然显示错误?我的问题在这里:stackoverflow.com/questions/8473650/ ...提前致谢....
2021-05-11 10:39:08
这是我需要的答案,谢谢。我只需要对这个话题做最后一句话。您能否提供一个指向显示替代解决方案的问题的链接,或者将示例复制粘贴到此处,或者这应该是另一个问题?:)
2021-05-15 10:39:08
如果我不提交表单而是有一个简单的按钮(不发布表单)并且我在单击该按钮时使用 .validate() 进行显式验证,该怎么办?那可能吗?
2021-05-16 10:39:08
@Ismail - 在这种情况下,您仍然.validate()首先使用装配验证,然后使用.valid()which 根据您设置的规则检查表单是否有效。您可以在此处阅读有关该功能的更多信息: docs.jquery.com/Plugins/Validation/valid
2021-05-17 10:39:08
仅供未来读者参考:从contenteditable1.15.0 版开始支持属性
2021-05-18 10:39:08

你缺少一个右括号。试试这个:

$("#pseudoForm").validate({
    onfocusout:true,
    rules:{
        first_name:"required",
        last_name:"required"
    }
});
抱歉,问题中缺少括号,但它在我的代码中,现在已更正。谢谢
2021-04-30 10:39:08

如果按类选择表单,您可能会得到相同的错误

$(".form_class").validate(...

而不是通过 ID $("#form_id").validate(...

或标签名称 $("form").validate(...

打开jquery.validate.jsjquery.validate.min.js找到(ctrl + F)“ label ”并replaceAll使用您需要的标签:

示例:div

然后进行验证。

生活在快车道
2021-05-04 10:39:08
//HTML

<div class="form-group has-feedback col-xs-8 " style="padding-right:0px">
                <input type="tel" class="form-control" name="Otp_MobileNo" id="mobileNo" placeholder="Mobile No."  minlength="10" maxlength="10">
                <span id="mobileno_message"  style="display:none;color: red;">Please enter a valid Mobile No</span>
            </div>


    //Java Script
     $("#getOtp").click(function(){
         jQuery(document).ready(function(){





            var MobileNo = jQuery("#mobileNo").val();
            var MobileNoLength = MobileNo.length;  
            var zipRegex = /^\d{10}$/;
             var mobileNo = $("#mobileNo").val();

            if (!zipRegex.test(MobileNo))
            { 
               jQuery('#mobileno_message').show();


            }
            else
            { 

              // success!

                 jQuery('#mobileno_message').hide();
                 $.ajax({
                type : 'POST',
                url  : '<?php echo site_url('Login/send_otp'); ?>',
                data : {Otp_MobileNo:mobileNo,},
                dataType    : 'json',
                beforeSend: function()
                { 
                  $("#error").fadeOut();
                },
                success :  function(response)
                { 
                alert(response.message_text);
                $("#check-otp").delay().animate({
                    height: 'toggle',
                  },
                  "slow");
                $("#getOtp").hide();
                }
             });





            }

          });



           });