如何清除选择框的验证？

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>