提出する前にフォームのバリデーションを行う最良の方法は何ですか

Question

提出する前にフォーム検証を行う最良の方法は何ですか？

実際のシナリオは、saveというボタンがあるので、ユーザーが保存ボタンを押したときと同じです。

データを検証し、フローをサーバーに渡してデータをテーブルに格納する必要があります。代わりに、サーバー側でフォームデータの検証を行うための

、検証するためにjavascriptやjqueryのスクリプトを記述し、クライアント側自体フォームで

<form> 
 
    <header> 
 
     <h1>Testing </h1> 
 
    </header> 
 
    <p> 
 
     Receipt number: 
 
     <input type="text" id="grn" class="tb1" onkeypress="return isNumber(event)" /> Type 
 
     <select name="evalu" id="evalu"> 
 
      <option value="electrical">Electrical</option> 
 
      <option value="mechanical">Mechanical</option> 
 
     </select> 
 
     cad 
 
     <select name="cd" id="cd"> 
 
      <option value="unit1">xv</option> 
 
      <option value="unit2">ed</option> 
 
     </select> 
 
     <input type="button" id="find" value="Find" class="button0" /> 
 
     <br> 
 
     <br> Report No 
 
     <input type="text" name="irepno" id="irepno" class="tb1" maxlength="8" /> date 
 
     <input type="text" name="idt" id="idt" class="tb1" value="<%= new SimpleDateFormat(" dd-MM-yyyy ").format(new java.util.Date())%>"> 
 
     <input type="button" id="search" value="Search" class="button0" /> 
 
     <br></br> 
 
     <input type="button" value="Save the record" id="saverecord" class="button0"> 
 
    </p> 
 
</form>

Answer 1

のJavascript自体になり、データおよび検証のクライアント側の処理を追加するために意図して開発されています。

最も適切な方法は、適用している状況と、 のjavascriptテクノロジによって異なります。

あなたが例えば、特定のクライアントサイドの技術やフレームワークを使用していない場合は、angularjsまたはemberjsなど

あなたは接続可が https://jqueryvalidation.org/

$(function() { 
 
    // Initialize form validation on the registration form. 
 
    // It has the name attribute "registration" 
 
    $("form[name='registration']").validate({ 
 
    // Specify validation rules 
 
    rules: { 
 
     // The key name on the left side is the name attribute 
 
     // of an input field. Validation rules are defined 
 
     // on the right side 
 
     firstname: "required", 
 
     lastname: "required", 
 
     email: { 
 
     required: true, 
 
     // Specify that email should be validated 
 
     // by the built-in "email" rule 
 
     email: true 
 
     }, 
 
     password: { 
 
     required: true, 
 
     minlength: 5 
 
     } 
 
    }, 
 
    // Specify validation error messages 
 
    messages: { 
 
     firstname: "Please enter your firstname", 
 
     lastname: "Please enter your lastname", 
 
     password: { 
 
     required: "Please provide a password", 
 
     minlength: "Your password must be at least 5 characters long" 
 
     }, 
 
     email: "Please enter a valid email address" 
 
    }, 
 
    // Make sure the form is submitted to the destination defined 
 
    // in the "action" attribute of the form when valid 
 
    submitHandler: function(form) { 
 
     form.submit(); 
 
    } 
 
    }); 
 
});

label, 
 
input { 
 
    display: block; 
 
} 
 
input{ 
 
margin-bottom:15px; 
 
} 
 
label.error { 
 
    color: red; 
 
    margin-top:-10px; 
 
    margin-bottom:15px; 
 
}

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

 
<div class="container"> 
 
    <h2>Registration</h2> 
 
    <form action="" name="registration"> 
 

 
    <label for="firstname">First Name</label> 
 
    <input type="text" name="firstname" id="firstname" placeholder="John" /> 
 

 
    <label for="lastname">Last Name</label> 
 
    <input type="text" name="lastname" id="lastname" placeholder="Doe" /> 
 

 
    <label for="email">Email</label> 
 
    <input type="email" name="email" id="email" placeholder="john@doe.com" /> 
 

 
    <label for="password">Password</label> 
 
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" /> 
 

 
    <button type="submit">Register</button> 
 

 
    </form> 
 
</div>

を食べているjQueryの検証プラグイン を使用して試すことができます

Answer 2

提出のものをチェックするためのあらゆる可能な方法がありますフォーム値をサーブレットに渡します。

これはjquery pluginでも使用できます。

Answer 3

そこにはいくつかの大きなバリデーションライブラリがあります。私が特に気に入っているのは、文書化されていて使いやすいのでjQuery.validate.jsです。

あなたがあなた自身を書くことを好む場合は、開始するには良い場所がthis W3Schools article on Javascript form validation

Answer 4

私はあなたにオプションを提案し、あなた自身を選択することができます：

1）saverecordボタンをクリックすると、関数内に検証コードを記述します。

2）入力フィールドを検証します（あなたのケースでは、「受信番号」と「レポート番号」は数字のみです）、onkeypress（またはonchange）イベントを処理してユーザーからの入力を検証する関数を書くことができます。

Answer 5

フォームの検証には多くの方法があります。私は入力の詳細を確認する簡単な方法であるHTML要素を使ってフォームを検証する方が好きです。

ここでは、単純な形式でクライアントが入力した詳細を検証するために使用したコードスニペットを示します。

<fieldset> 
    <legend>Enter Your Details</legend> 
    <p> 
     <label for="fave"> Mobile: 
      <input maxlength="10" autofocus="on" autocomplete="on" name="mobile" placeholder="Mobile number"/> 
     </label> 
    </p> 

    <p> 
     <label for="name"> Name: 
      <input maxlength="30" pattern="^.* .*$" required size="15" name="name" placeholder="Your name"/> 
     </label> 
    </p> 

    <p> 
     <label for="password"> Password: 
      <input type="password" required name="password" placeholder="Min 6 characters"/> 
     </label> 
    </p> 

    <p> 
     <label for="email"> 
      Email: <input type="email" pattern=".*@mydomain.com$" placeholder="user@domain.com" id="email" name="email"/> 
     </label> 
    </p> 
    <p> 
     <label for="tel"> 
      Tel: <input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/> 
     </label> 
    </p> 
    <p> 
     <label for="url"> 
      Your homepage: <input type="url" id="url" name="url"/> 
     </label> 
    </p> 
</fieldset> 

タイプ等

いくつかの要素、MAXLENGTH、パターン、を必要は、サイズ は、クライアント側でフォームを検証するために使用されます。

私はブックThe Definitive Guide to HTML5が好きで、フロントエンド開発を使ってフォームを検証する方法を学ぶことができます。

これがあなたの問題を解決することを願っています。