jQuery 验证插件 - 所有必填字段的一条错误消息

Question

我如何才能在所有必填字段中只显示一条消息？

例如 - 我有 3 个字段，它们都是必需的。 jquery.validate 显示每个字段的错误，但我只想显示一条消息，例如 "all marked fields are required".

我不能使用汇总值（如 numberOfInvalids 等），因为同时我需要显示拼写错误（错误的电子邮件、短密码等）。

代码示例（左边的形式是为了验证，右边的形式是为了展示它应该是什么样子）： screenshot of codepen.io

HTML:

<form class="form-validate">
    <div class="form-errors">
        <h3>Errors:</h3>
        <ul></ul>
    </div>
    <h3>All fields required:</h3>
    <div class="form-field">
        <input type="text" name="q" id="f-q" placeholder="Required text field" required>
    </div>
    <div class="form-field">
        <input type="email" name="w" id="f-w" placeholder="Required email field"  required>
    </div>
    <div class="form-field">
        <input type="text" name="e" id="f-e" placeholder="Required text field" required>
    </div>
    <input type="submit">
</form>

JS:

$(document).ready(function(){
    $('.form-validate').validate({
        errorContainer: $(this).find('.form-errors'),
        errorLabelContainer: $('ul', $(this).find('.form-errors')),
        wrapper: 'li',
    });
});

$.extend($.validator.messages, {
    required: "Fill all marked fields please"
});

提前致谢！

Answer 1

首先你必须包括JQuery cdn's

<script  src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

和

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

然后更改您的代码试试这个

<form class="form-validate" id="myForm" method="post" action="">
<div class="form-errors">
    <h3>Errors:</h3>
    <span id="errorMSG"> </span>
</div>
<h3>All fields required:</h3>
<div class="form-field">
    <input type="text" name="q" id="f-q" required  placeholder="Required text field" >
</div>
<div class="form-field">
    <input type="email" name="w" id="f-w" required  placeholder="Required email field"  >
</div>
<div class="form-field">
    <input type="text" name="e" id="f-e" required  placeholder="Required text field" >
</div>
<input type="submit" onclick="checkSubmission();">

和JQuery

function checkSubmission(){$("#myForm").validate({

      rules:
          {
            q: 
            {
                required: true,
            },
            w: 
            { 
                required:true,
            },
            e: 
            { 
                required:true,
            }
          },
       showErrors: function(errorMap, errorList) {
    $(".form-errors").html("All fields must be completed before you submit the form.");
}
       });     }

Answer 2

Just 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.

$('.form-validate').validate({
    // your other options,
    groups: {
        mygroup: "q w e"
    }
});

演示：jsfiddle.net/8gxprw4y/

如果您的字段名称是动态生成的，那么您需要在调用 .validate() 之前动态构建 groups 选项。 .

var names = ""; // create empty string
$('[id^="f-"]').each(function() { // grab each input starting w/ the class
    names += $(this).attr('name') + " "; // append each name + single space to string
});
names = $.trim(names); // remove the empty space from the end

$('.form-validate').validate({
    // your other options,
    groups: {
        myGroup: names // reference the string
    }, 
    ....

演示 2：jsfiddle.net/8gxprw4y/3/

jQuery 验证插件 - 所有必填字段的一条错误消息

jQuery validation plugin - one error message for all required fields

jquery

jquery-validate