0

jQuery の学習に役立つカスタム jQuery フォーム検証スクリプトを作成したいと考えており、それはより良いベスト プラクティスです。しかし、私が始めた瞬間、解決策よりも多くの質問があることに気づきました. jQuery 検証プラグインやその他のサードパーティ プラグインがたくさんあることは知っていますが、これはゼロから作成したかったものです。

私の最初の試みは、以下のようなものをもたらします。それはうまく機能しますが、基本的に同じタイプの入力をフォーム全体で検証するには、多くのコードのように思えます。

$(".validation").submit(function(){
  if($(".name").val() === ""){
    $(".name").addClass("error");
    $(".errorMessage").html("<p>Error: Please enter a valid name</p>").slideDown();
    return false;
  }if($(".address1").val() === ""){
    $(".address1").addClass("error");
    $(".errorMessage").html("<p>Error: Please enter a valid address</p>").slideDown();
    return false;
  }if($(".city").val() === ""){
    $(".city").addClass("error");
    $(".errorMessage").html("<p>Error: Please enter a valid city</p>").slideDown();
    return false;
  }if($(".state").val() === "0"){
    $(".state").addClass("error");
    $(".errorMessage").html("<p>Error: Please enter a valid state</p>").slideDown();
    return false;
  }if($(".zipCode").val() === ""){
    $(".zipCode").addClass("error");
    $(".errorMessage").html("<p>Error: Please enter a valid zip code</p>").slideDown();
    return false;
  }if($(".phone").val() === ""){
    $(".phone").addClass("error");
    $(".errorMessage").html("<p>Error: Please enter a valid phone</p>").slideDown();
    return false;
  }if($(".email").val() === "" || ! /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test($(".email").val())){
    $(".email").addClass("error");
    $(".errorMessage").html("<p>Error: Please enter a valid email</p>").slideDown();
    return false;
  }
});

2 回目の試行では、以下のような結果が得られました。これにより、すべてのifステートメントが削減されますが、イベントバブリングにより、フォームが逆方向に検証されます。また、 で一度に 1 つのエラー メッセージのみを追加します$(".errorMessage").html("There was an error" + " " + name);。一度に 1 つずつではなく、すべての空のフォーム フィールドに対して同時にこのエラー メッセージを表示することは可能でしょうか? この動作のCodePen デモがあります。

$("form").on("submit", function(e){
  $("input").each(function(){

    var name = $(this).attr("name");

    if($(this).val() == ""){
      $(".errorMessage").html("There was an error" + " " + name);
      e.preventDefault();
    }else{
      return true; 
    }
  });
});

テクニックやベストプラクティスに関する提案は素晴らしいでしょう。

ありがとう、

JB

4

2 に答える 2

0

はい、可能です。そのためには、これらのエラーをどの程度正確に表示するかを決定する必要があります。一部の人々は、「次のエラーを修正してください:」など、リストの前にある種の見出しを付けて、各エラーをリスト項目に入れます。次に、li 要素を作成し、そのテキストをエラーに設定して、ul リスト オブジェクトに追加します。

ユーザーに何が間違っているかを伝える平易な英語の文を作成するために、ある種の文を作成することもできますが、私は通常、リスト オプションを好みます。正直なところ、これを行う方法は無限にあります。

あなたの質問を完全に理解できれば幸いですが、そうでない場合はお知らせください。

編集：これはあなたの例から取られた簡単で汚い例です：http://codepen.io/anon/pen/hJdtD

于 2013-02-08T14:51:20.267 に答える