5

jQuery 検証プラグインを使用してフォームを検証しています。すべてのフィールドは必須であり、フォームのエラー メッセージ用のスペースは限られています。そのため、ルールのフィールドのいずれかが入力されていない場合、「送信する前にすべてのフィールドを入力する必要があります」という単一のエラー メッセージを表示することは可能ですか?形' ？

私のjQueryの知識は限られており、次のコードを使用してフィールドごとに個別のエラーメッセージを出力するように設定する方法を例からしか理解できません。

$(".contact-form").validate({
  errorLabelContainer: ".form-errors",
  wrapper: "li",
  ignore: ".ignore",
  errorElement: "em",
  rules: {
    first_name: { required: true },
    last_name: { required: true },
    email: { required: true, email: true }
  },
  messages: {
    first_name: "Please enter your first name",
    last_name: "Please enter your last name",
    email: { required: "Please enter your email address", email: "Your email address must be in the format of name@domain.com" }
  },
});
4

4 に答える 4

8

これはあなたが求めたことを行います：

Javascript

$(".contact-form").validate({
    ignore: ".ignore",
    rules: {
        first_name: {
            required: true
        },
        last_name: {
            required: true
        },
        email: {
            required: true,
            email: true
        }
    }, 
    showErrors: function(errorMap, errorList) {
        $(".form-errors").html("All fields must be completed before you submit the form.");
    }
});​

デモ

このエラー メッセージは、誰かが間違った電子メール アドレスを入力した場合にはあまり適していませんが、すべてのフィールドが入力されているにもかかわらず、フォームにまだエラーがあるためです。

classまた、属性を に設定することにより、フォームで必須フィールドを指定できることに注意してくださいrequired。

HTML

<form class="contact-form" type="post" action="">
    <input type="text" name="first_name" id="first_name" class="required" />
    <input type="text" name="last_name" id="last_name" class="required" />
    <input type="email" name="email" id="email" class="required email" />
    <input type="submit" />
    <div class="form-errors"></div>
</form>​

Javascript

$(".contact-form").validate({
    showErrors: function(errorMap, errorList) {
        $(".form-errors").html("All fields must be completed before you submit the form.");
    }
});​

デモ

于 2012-12-05T05:37:22.683 に答える
3

invalidHandlerが必要なもののようです。この例を見てください（ソース：http ：//docs.jquery.com/Plugins/Validation/validate#toptions ）：

$(".selector").validate({
   invalidHandler: function(form, validator) {
  var errors = validator.numberOfInvalids();
  if (errors) {
    var message = errors == 1
      ? 'You missed 1 field. It has been highlighted'
      : 'You missed ' + errors + ' fields. They have been highlighted';
    $("div.error span").html(message);
    $("div.error").show();
  } else {
    $("div.error").hide();
  }
}
})
于 2012-12-05T05:14:31.440 に答える
2 
fxnReqValidation = function (event) {
        $("#errormsg").empty();
        $("input:text").each(function (index, InputElement) {
            var Ele = g_Json[InputElement.name];
            if ((Ele.required) && (InputElement.value == "" || null)) {
                $("#errormsg").append("" + All fields must be completed before you submit the form + "");                
            }           
        });
        event.preventDefault();
    }

これはあなたに役立つかもしれません。

于 2012-12-05T05:10:32.807 に答える
0

toggle() メソッドを使用してメッセージを切り替えたり、jquery プラグインを使用したりできます...すばやく簡単にコーディングできると思います...

于 2012-12-05T05:34:04.647 に答える