如何清除選擇框的驗證？

Question

我現在的問題是，當用戶沒有選擇任何一個選擇時單擊NEXT按鈕後，選擇框的驗證會出來，但是如果我點擊NEXT按鈕上的更多時間，驗證將被保留出來。

在我的頁面中，由一個選擇框和一個輸入字段組成，輸入字段的驗證只出現一次，無論點擊NEXT按鈕的幾次，但選擇框都沒有。

有人可以幫我嗎？

這裏是我的代碼：

$('#btnNextContactInfoModel').off('click').click(function() { 
 
    var focusSet = false; 
 
    if (!$('#contact123').val() || !$('#contacttype').val()) { 
 
    if ($("#contact123").parent().next(".validation").length == 0) // only add if not added 
 
    { 
 
     $("#contact123").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>"); 
 
    } 
 
    if ($("#contacttype").parent().next(".validation").value == undefined) // only add if not added 
 
    { 
 
     $("#contacttype").after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>"); 
 
    } 
 

 
    e.preventDefault(); // prevent form from POST to server 
 
    $('#contact123').focus(); 
 
    $('#contacttype').focus(); 
 
    focusSet = true; 
 
    } else { 
 
    $("#contact123").parent().next(".validation").remove(); 
 
    $("#contacttype").parent().before(".validation").remove(); // remove it 
 
    } 
 

 
    $("#contactInfoModel").closeModal(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div id="selectcontacttype" class="input-field col s12 m3 l3"> 
 
    <select id="contacttype" name="contactselection"> 
 
     <option value="" disabled selected>Please select</option> 
 
     <option value="1">Type 1</option> 
 
     <option value="2">Type 2</option> 
 
     <option value="3">Type 3</option> 
 
     <option value="4">Type 4</option> 
 
     <option value="5">Type 5</option> 
 
    </select> 
 
    <label data-i18n="personal-particular-update.msg_type"></label> 
 
    </div> 
 
    <div class="input-field col s12 m3 l3"> 
 
    <label class="active" for="ContactInfo">Contact Info</label> 
 
    <div id="Contact Info"> 
 
     <input id="contact123" name="contactsTypes" type="text"> 
 
    </div> 
 
    </div> 
 
    <input type="hidden" id="storeType" /> 
 
    <input type="hidden" id="storecontactinfo" /> 
 
</div> 
 

 
<div class="modal-footer"> 
 
    <button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button"> 
 
    NEXT 
 
    </button> 
 
    <button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button"> 
 
    Close 
 
    </button> 
 
</div>

Answer 1

這裏是你的答案.. 我剛纔添加的驗證的長度，如果長度爲0，則添加了驗證消息，否則消息不會被添加。

$('#btnNextContactInfoModel').off('click').click(function() { 
    var focusSet = false; 
    if (!$('#contact123').val() || !$('#contacttype').val()) { 
    if ($("#contact123").parent().next(".validation").length == 0) // only add if not added 
    { 
     $("#contact123").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>"); 
    } 
    if ($("#contacttype").parent().find(".validation").value == undefined && $("#contacttype").parent().find(".validation").length == 0) // only add if not added 
    { 
    debugger; 
     $("#contacttype").after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>"); 
    } 

    e.preventDefault(); // prevent form from POST to server 
    $('#contact123').focus(); 
    $('#contacttype').focus(); 
    focusSet = true; 
    } else { 
    $("#contact123").parent().next(".validation").remove(); 
    $("#contacttype").parent().before(".validation").remove(); // remove it 
    } 

    $("#contactInfoModel").closeModal(); 
}) 

這裏的jsfiddle鏈接：click here

Answer 2

你剛纔忘了.parent（）發生以下$消息（ '＃contacttype'）時：

$('#btnNextContactInfoModel').off('click').click(function() { 
 
    var focusSet = false; 
 
    if (!$('#contact123').val() || !$('#contacttype').val()) { 
 
    if ($("#contact123").parent().next(".validation").length == 0) // only add if not added 
 
    { 
 
     $("#contact123").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>"); 
 
    } 
 
    if ($("#contacttype").parent().next(".validation").length == 0) // only add if not added 
 
    { 
 
     $("#contacttype").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>"); 
 
    } 
 

 
    e.preventDefault(); // prevent form from POST to server 
 
    $('#contact123').focus(); 
 
    $('#contacttype').focus(); 
 
    focusSet = true; 
 
    } else { 
 
    $("#contact123").parent().next(".validation").remove(); 
 
    $("#contacttype").parent().next(".validation").remove(); // remove it 
 
    } 
 

 
    $("#contactInfoModel").closeModal(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div id="selectcontacttype" class="input-field col s12 m3 l3"> 
 
    <select id="contacttype" name="contactselection"> 
 
     <option value="" disabled selected>Please select</option> 
 
     <option value="1">Type 1</option> 
 
     <option value="2">Type 2</option> 
 
     <option value="3">Type 3</option> 
 
     <option value="4">Type 4</option> 
 
     <option value="5">Type 5</option> 
 
    </select> 
 
    <label data-i18n="personal-particular-update.msg_type"></label> 
 
    </div> 
 
    <div class="input-field col s12 m3 l3"> 
 
    <label class="active" for="ContactInfo">Contact Info</label> 
 
    <div id="Contact Info"> 
 
     <input id="contact123" name="contactsTypes" type="text"> 
 
    </div> 
 
    </div> 
 
    <input type="hidden" id="storeType" /> 
 
    <input type="hidden" id="storecontactinfo" /> 
 
</div> 
 

 
<div class="modal-footer"> 
 
    <button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button"> 
 
    NEXT 
 
    </button> 
 
    <button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button"> 
 
    Close 
 
    </button> 
 
</div>