标签: jquery-validate

我正在使用 jQuery Validate 和 xVal 来验证输入表单。这很好用。但是，我确实想用星号 (*) 或类似的内容标记我的必填字段，以显示实际需要的字段。

我可以手动执行此操作，但由于我已经使用 xVal 生成了验证规则，所以我认为我可以根据提供的规则自动标记必填字段。

有没有办法连接到 xVal 或 jQuery Validate 来检索规则，或者以某种方式让它们标记我的必填字段？

我正在使用最新版本的 jQuery 和 jQuery Validate。

谢谢

我正在使用第三方工具

• jquery.validate.min.js
• jquery.validate.unobtrusive.min.js

当我输入以下内容时，显示一个消息框。工具验证的自定义验证失败。我假设它也使用“showError”。我知道如果没有完整的代码库，这是一个很难问的问题。我的问题是...

之后是否有事件发生showErrors。或者有没有办法扩展此功能而不是覆盖它。

$.validator.setDefaults({
   showErrors: function (errorMap, errorList) {
        $(".messagebox").show();
    }
});

我的网站中有多个表单，您可以根据您的查询显示/隐藏它们，但 jquery 验证仅适用于第一个表单（特定）。\n这里有我的表单：https ://www.lokkura.es/ contacto2.php单击左侧面板，您将更改表单。

表格 1（jquery 验证在这里工作）：

      <div id="form1">\n            <form id="form" class="form" action="#" method="post">\n            <div class="clearfix">\n\n            <div class="col-md-6 text-center">\n\n                <div class="control-group">\n                <input name="name" type="text" class="validate[\'required\'] textbox1" placeholder="* Nombre : "\n                onfocus="this.placeholder = \'\'" onBlur="this.placeholder = \'* Nombre :\'" />\n                </div>\n\n                <div class="control-group">\n                <input name="name" type="text" class="validate[\'required\'] textbox1" placeholder=" Ciudad : "\n                onfocus="this.placeholder = \'\'" onBlur="this.placeholder = \'* Ciudad :\'" />\n                </div>\n\n                <div class="control-group">\n                <input name="email" type="text" class="validate[\'required\',\'email\']  textbox1"\n                placeholder="* Email : " onFocus="this.placeholder = \'\'" …

我制作了一个包含多个部分的表单，后面的部分被隐藏，但在用户单击当前部分上的下一个按钮后将显示。我尝试在显示表单的其余部分之前对此单击进行简单的“必须填写”验证。

据我从这里的其他问题收集到的信息，我的方法应该有效。如果发现错误，则var validate应该等于，true这将停止表单的进展，但一旦填写字段并再次单击按钮，将允许表单继续进行

然而，目前这一切似乎只是验证第一个字段，然后什么都不做。即使该字段有效，它仍然不会继续执行该函数的其余操作。

js 库：http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js

我尝试使用的方法： http: //jqueryvalidation.org/Validator.element/

<div class="col-sm-8 sec-one">
    <div class="form-group">
        <select name="t1" required>
            <option value="" disabled selected>Choose an option...</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="A">A</option>
            <option value="D">D</option>
        </select>
    </div>
    <div class="form-group">
        <select name="t2" required>
            <option value="" disabled selected>Choose an option...</option>
            <option value="A">A</option>
            <option value="D">D</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
    <button type="button" class="formbut next1">Next</button>
</div>


var validator = $("form").validate();

$(".next1").click(function () {
    validator.element('.sec-one [name]');
    if (validator) {
        $(".sec-one").slideUp("slow", function () { …

应该如何在 jQuery validate() 的submitHandler 回调中访问给定的表单输入？我有一个复杂的解决方案，但希望一定有更好的方法。

http://jsfiddle.net/1tzuojpg/2/

$(document).ready(function(){
    $("#myform").validate({
            submitHandler: function(form) {
                var inputs=$(form).find(':input');
                console.log('inputs',inputs);
                console.log('form',form,$(form),form.elements);
                console.log('this',this, $(this));
                //console.log( this.serializeArray() ); //this is not a jQuery object
                console.log( $( this ).serializeArray() );
                console.log( $( form ).serializeArray() );
                console.log( inputs.serializeArray() );
                alert(inputs.filter('[name=myName]').val());
            }
        });
  });

<form id='myform' >
   <input type='text' name='myName' value="123" />
   <input type="submit" value="submit">
</form>

即使在 CKEditor 中输入文本后，JQuery 验证错误消息也不会消失。

提琴手： http : //jsfiddle.net/BmZ93/458/

代码：

$(document).ready(function() {
    $('#add-job').validate({
    ignore: [],         
    rules: {
                editor1: {
                    required: function() 
                    {
                      CKEDITOR.instances.editor1.updateElement();
                    }
                  }
                },
                messages: {
                Job_Title: "Required",
                Job_Location: "Required",
                jobid: "Required",
                Job_Cat: "Required",
                editor1: "Required"
                },
                /* use below section if required to place the error*/
                errorPlacement: function(error, element) 
                {
                    if (element.attr("name") == "editor1") 
                    {
                       error.insertBefore("textarea#editor1");
                    } else {
                       error.insertBefore(element);
                    }
                }
            });
});

期望： 一旦用户在 ckeditor 中输入一些文本，验证错误消息应该消失。

任何建议/方向将不胜感激。

我的 jquery 验证是这样的：

store: {
    rules: {
        banner: {
            required: true
        }
    },
    messages: {
        banner: 'The banner must be filled',
    },
    errorElement: 'span',
    errorPlacement: errorPlacement,
    highlight: highlight,
    unhighlight: unhighlight
},

如果用户不上传尺寸为 1170 x 300 像素的横幅，则会出现如下消息：

请上传一张 1170 x 300 像素尺寸的图片

我该怎么做？

我正在处理一个项目，我需要添加简单的方法来验证客户端表单，然后我转向了 jQuery 验证插件。我玩了一些基本的东西，但是当它做成这样的时候我很挣扎

到目前为止，我已经做了这么多

我的html代码

        <body>
        <form id="default-register-user" method="POST" action="index.php">
            <div class="form-row">
                <div class="col-md-4 mb-3">
                    <label for="validationServer01">First name</label>
                    <input type="text" class="form-control" id="validationServer01" placeholder="First name" 
                    required name="fname">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="validationServer02">Email</label>
                    <input type="text" class="form-control" id="validationServer02" placeholder="Last name" required name="lname" minlength="4">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="validationServerUsername">Username</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroupPrepend3">@</span>
                        </div>
                        <input type="text" class="form-control" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3"
                            required name="username">
                    </div>
                </div>
            </div>
            <button class="btn btn-primary" type="submit">Submit form</button>

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" …

编辑用户和清除用户是单独的按钮.

那么如何使用以下语句validator.resetForm()清除单击Clear Button时的错误消息; ？

function clearUser(){ 
       // Need to clear previous errors here 
} 


function editUser(){     
    var validator = $("#editUserForm").validate({ 
            rules: {                             
                userName: "required" 
        },  
        errorElement: "span" ,                
        messages: { 
          userName: errorMessages.E2 
        } 
      }); 

     if(validator.form()){  
        // form submition code 

    } 
} 

好的,这就是交易:

我通过AJAX调用Colorbox中的表单,并设置了一个回调来处理它的验证,这很好.唯一的问题是,当我尝试在字段无效时调整框大小(生成带有一类错误的标签)时,仅适用于第二次尝试.

我在click事件上调用resize方法,它只在第二次单击时起作用.

我怀疑这是因为它试图在生成标签之前调整大小......我不知道如何规避这个问题.任何帮助,将不胜感激.

$(".colorbox").click(function(e) {
    e.preventDefault();

    var el = $(this),
        sdHref = (el.attr("data-sd-href") ? el.attr("data-sd-href") : el.attr("href")),
        sdTitle = (el.attr("data-sd-title") ? el.attr("data-sd-title") : el.attr("title")),
        sdIframe = (el.attr("data-sd-iframe") ? true : false),
        sdWidth = (el.attr("data-sd-width") ? el.attr("data-sd-width") : false),
        sdHeight = (el.attr("data-sd-height") ? el.attr("data-sd-height") : false);

    $.colorbox({
        href: sdHref,
        title: sdTitle,
        iframe: sdIframe,
        width: sdWidth,
        height: sdHeight,
        scrolling: false,
        onComplete: function() { // I validate the form once the content is loaded
            $("form").validate({
                rules: {
                    phone: {
                        minlength: 10,
                        maxlength:10, …