表單驗證，正常按鈕，紅色框和清潔數據

Question

我有一個彈出窗體，我必須驗證此窗體中的字段，然後關閉此彈出窗口，我需要使用此驗證與正常按鈕，而不是提交，如果這些字段是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"); 
    //  } 
    // 
    // }); 
} 

Answer 1

您可以使用許多彈出/模態插件之一，但如果你想創建自己的，不是你應該做同樣的事情到這一點：

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確實，但我從來沒有嘗試發明熱水，我只是採取現有的插件之一，如Magnific Popup。

相同的代碼在JSFiddle。