Wie ist die Validierung für die Auswahlbox zu löschen?

Question

Mein Problem ist jetzt die Validierung für die Auswahlbox wird herauskommen, nachdem ich auf die Schaltfläche WEITER geklickt habe, wenn der Benutzer keine der Auswahl ausgewählt hat, aber wenn ich dann mehrmals auf die Schaltfläche WEITER klickt, hielt die Validierung aus herauskommen.

In meiner Seite gibt es eine Auswahlbox und ein Eingabefeld, die Validierung für das Eingabefeld erscheint nur einmal, egal, dass ich mehrfach auf die NEXT-Taste klicke, aber die Auswahlbox nicht.

Kann mir jemand helfen?

Hier ist mein Code:

$('#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

Hier ist Ihre Antwort .. Ich habe gerade eine Länge der Validierung hinzugefügt, wenn die Länge 0 ist, dann wird die Validierungsnachricht hinzugefügt, Andernfalls wird keine Nachricht hinzugefügt.

$('#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(); 
}) 

Hier jsFiddle Link: click here

Answer 2

Sie haben vergessen, nur eine .parent(), wenn geschieht, die Nachricht unter $ ('# Contact'):

$('#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>