jQueryの検証プラグインなしで送信ボタンなしのJavaScriptでフォームを検証する方法

Question

私はこのフォームをhtmlで作成していますので、ユーザーが#btnPopupを押したときにこのフォームを検証したいと考えています。クリックボタンでjQueryの検証プラグインを使用せずにこれを行うにはどうしたらいいですか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frmUsers" data-userid=""> 
 
    <img id="btnClose" src="resources/img/close_window.png"> 
 
    <h2 id="popupTitle"></h2> 
 
    <ul> 
 
    <li> 
 
     <label for="username">Username:</label> 
 
     <input type="text" id="username" name="txtUsername" placeholder="Please select username" required/> 
 
    </li> 
 
    <li> 
 
     <label for="level">Level:</label> 
 
     <input type="number" id="level" name="txtLevel" placeholder="Please select level" required/> 
 
    </li> 
 
    <li> 
 
     <label for="registrationStatus">RegistrationStatus:</label> 
 
     <select name="txtRegistrationStatus" id="registrationStatus" placeholder="Please select registration status" class="required"> 
 
     <option value="Registered">Registered</option> 
 
     <option value="Unregistered">Unregistered</option> 
 
     </select> 
 
    </li> 
 
    <li> 
 
     <label for="registrationDate">RegistrationDate:</label> 
 
     <input type="text" id="registrationDate" name="txtRegistrationDate" placeholder="Please select date" required/> 
 
    </li> 
 

 
    <div class="btnZone"> 
 
     <input class="btnDown" type="button" value=" " id="btnPopup" /> 
 
     <input class="btnDown" type="button" value="Cancel" id="btnCancel"> 
 
    </div> 
 
    </ul> 
 
</form>

Answer 1

あなたはどのようなあなたの希望を達成し、あなたのボタンにイベントをアタッチするためのパラメータでフォームの入力を送信することによって、AJAXを使用することができます。

$('#btnPopup').on('click', function(){ 

    // Fields validation 

    if(validation){ 
     $.ajax({ 
      method: "POST", 
      url: "your_url", 
      dataType: 'json', 
      data: { 
       'username' : $('#username').val(), 
       'level' : $('#level').val() 
       ... 
      } 
     }) 
     .done(function(result) { 
      // Do something 
     }) 
     .fail(function(result, textStatus) { 
      // Do something when error happened 
     }); 

    }else{ 
     // Do something when your validations are bad. 
    } 

}); 

パラメータサーバー側の検証を忘れないでください。検証クライアント側は簡単に渡すことができます。その後、あなたはあなたがあなたの「#btnPopup」にリスナーを「クリック」装着すると、単純な、それの内側に提出する追加してフォームを提出することができますAJAXの成功コールバック

Answer 2

内のサーバの応答を取得することができます。

var myButton = document.getElementById("btnPopup"); 
myButton.addEventListener("click" , function(){ 
    /* 
     --Your Validation logic goes here-- 
    */ 

    // You submit the Form when the Validation is over. 
    document.getElementById("frmUsers").submit(); 
}); 

これで、フォームの検証対象に応じて、独自の検証関数を記述することができます。本当に簡単で、非常に基本的な検証の一般的な機能を作成し、次のように1によって各フィールドの上で検証するために、次のようになります。

function validate(inputField){ 
    var myInputField = document.forms["frmUsers"][inputField].value; 

    // Add some simple Validation Rules 
    if(myInputField == null || myInputField == ""){ 
    // Do Something if validation fails [Eg: alert('error!!!');] 
    return false; 
    } 
} 

あなたが好き上記の関数を使用することができます。

validate("txtUsername"); 

あなたは明らかにすることができますループを作成し、フォームの各フィールドをパスして検証します。一般的にフォームを検証する方法はたくさんありますが、上の例では適切な方法であなたを得ることができます。

重要：これはクライアント側での検証です。 100のうち99のケースでは、実際にサーバー側の検証も構成する必要があることに注意してください。クライアント側の検証は100％安全ではありません。

Answer 3

はい、できます。下記のお

function validateForm() { 
 
    var x = document.forms["frmUsers"]["registrationDate"].value; 
 
    if (x == null || x == "") { 
 
     alert("Registration date must be filled out"); 
 
     return false; 
 
    } 
 
}

<input class="btnDown" type="button" value=" " id="btnPopup" onclick="return validateForm();/>