2016-09-10 7 views
-1

ポップアップフォームがあり、このポップアップを閉じる前にこのフォームのフィールドを検証する必要があります。この検証は通常のボタンで使用する必要があります。フィールドはemtyです。これらを赤色のボックスにマークし、後で 'このフィールドは空です'とする必要があります。フォームを閉じると、フォームからデータをクリーンアップする必要があります。どのようにjQueryとJavascriptを使ってこれを行うべきですか?フォームの検証、通常のボタン、赤いボックス、クリーンなデータ

<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" class="required"/> 
       <p></p> 
      </li> 
      <li> 
       <label for="level">Level:</label> 
       <input type="number" id="level" name="txtLevel" placeholder="Please select level"/> 
       <p></p> 

      </li> 
      <li> 
       <label for="registrationStatus">RegistrationStatus:</label> 
       <select name="txtRegistrationStatus" id="registrationStatus" 
         placeholder="Please select registration status"> 
        <option value="Registered">Registered</option> 
        <option value="Unregistered">Unregistered</option> 
       </select> 
       <p></p> 

      </li> 
      <li> 
       <label for="registrationDate">RegistrationDate:</label> 
       <input type="text" id="registrationDate" name="txtRegistrationDate" 
         placeholder="Please select date"/> 
       <p></p> 
      </li> 

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

そして、私のフォーム検証機能:

function validateForm() { 

    var txtUsername = $("#username").val(); 

    if(txtUsername == ""){ 
     ("#username").css("border-color", "red"); 
    } 

    // $(":input").each(function() { 
    //  if ($(this).val() == "") { 
    //   $(this).css("border-color", "red"); 
    //   // $("p").html("This field is empty"); 
    //   // $("input").val("This field is required"); 
    //   // alert($(this).attr("id") & " validate error"); 
    //  }else{ 
    //   $(this).css("border-color", "black"); 
    //  } 
    // 
    // }); 
} 
+0

フォームのコードとこれまでに取得したコードを追加してください。 – kaetzacoatl

+0

私は私の質問を編集する。 – Lyralei

答えて

0

あなたはこれに似た何かをする必要がありますよりも、あなたは多くのポップアップ/モーダルプラグインのいずれかを使用することができますが、あなたがあなた自身を作成する場合:

var txtUsername = $("#username"); 
 
function validateForm() { 
 
\t txtUsernameValid = $.trim(txtUsername.val()); 
 
\t txtUsername.toggleClass('invalid-input', !txtUsernameValid); 
 
\t return txtUsernameValid; 
 
}; 
 
$('[data-popup]').each(function(i) { 
 
\t var thisButton = $(this); 
 
\t var toPopup = $(thisButton.data('popup')); 
 
\t toPopup.wrap('<div class="popup-container"><div class="popup-content"></div></div>'); 
 
\t var popupContainer = toPopup.closest('.popup-container').hide(); 
 
\t popupContainer.find('.popup-content').append('<span class="popup-close">X</span>') 
 
\t thisButton.on('click', function(e) { 
 
\t \t e.preventDefault(); 
 
\t \t popupContainer.show(); 
 
\t }); 
 
\t popupContainer.find('.popup-close').on('click', function(e) { 
 
\t \t popupContainer.hide(); 
 
\t }); 
 
\t popupContainer.find('#btnSave').on('click', function(e) { 
 
\t \t /* Save your data, than reset the form */ 
 
\t \t if(validateForm()) { 
 
\t \t \t popupContainer.find('form')[0].reset(); 
 
\t \t \t popupContainer.hide(); 
 
\t \t }; 
 
\t }); 
 
\t popupContainer.find('#btnCancel').on('click', function(e) { 
 
\t \t popupContainer.find('form')[0].reset(); 
 
\t \t popupContainer.hide(); 
 
\t }); 
 
});
body { 
 
    font-family: sans-serif; 
 
} 
 
.popup-container { 
 
    background: none rgba(0, 0, 0, .5); 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
.popup-container::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
.popup-content { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    background: none #fff; 
 
    padding: 10px 20px; 
 
    text-align: left; 
 
} 
 
form ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
.popup-close { 
 
    display: inline-block; 
 
    padding: 4px; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 5px; 
 
    cursor: pointer; 
 
} 
 
.invalid-input { 
 
    border: 1px solid red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button data-popup="#frmUsers"> 
 
    Open form 
 
</button> 
 
<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" class="required" /> 
 
      <p></p> 
 
     </li> 
 
     <li> 
 
      <label for="level">Level:</label> 
 
      <input type="number" id="level" name="txtLevel" placeholder="Please select level" /> 
 
      <p></p> 
 
     </li> 
 
     <li> 
 
      <label for="registrationStatus">RegistrationStatus:</label> 
 
      <select name="txtRegistrationStatus" id="registrationStatus" placeholder="Please select registration status"> 
 
       <option value="Registered">Registered</option> 
 
       <option value="Unregistered">Unregistered</option> 
 
      </select> 
 
      <p></p> 
 
     </li> 
 
     <li> 
 
      <label for="registrationDate">RegistrationDate:</label> 
 
      <input type="text" id="registrationDate" name="txtRegistrationDate" placeholder="Please select date" /> 
 
      <p></p> 
 
     </li> 
 
     <div class="btnZone"> 
 
      <input class="btnDown" type="button" value="Save" id="btnSave" /> 
 
      <input class="btnDown" type="button" value="Cancel" id="btnCancel" /> 
 
     </div> 
 
    </ul> 
 
</form>

それはcomplicではありません確かにated、しかし私は熱湯を発明しようとは決してしません、私はちょうどMagnific Popupとして、既存のプラグインの1つを取る。

同コードはJSFiddleです。

関連する問題