jQuery Bootstrap - Leerer Feldvalidator funktioniert nicht richtig

Question

Ich versuche einen Formularvalidator zu erstellen, der je nachdem, ob das Feld beim Senden leer ist oder nicht, einen Bootstrap-Fehler/Erfolgskontur und Glyphon erzeugt. Momentan funktioniert es, aber die Glyphicons werden nicht angezeigt und das Eingabefeld wird nicht grün, wenn der Fehler korrigiert wurde und das Feld ausgefüllt wurde. Beim Senden wird es grün und der Benutzer sieht nur den grünen Umriss für a kurze Sekunde bevor sich die Seite ändert. Jede Hilfe würde sehr geschätzt werden.

HTML:

<form id="auth_form" action="action.php" method="post"> 

    <div class="form-group has-feedback" name="auth_code" id="auth_code"> 
    <label for="auth_code" class="control-label">Authorisation Code</label> 
    <input class="form-control" id="auth_code_input" name="auth_code_input" type="password"> 
    <span class="form-control-feedback glyphicon"></span> 
    </div> 

    <div class="form-group"> 
    <div> 
     <button class="btn btn-info" name="submit" type="submit">Submit</button> 
    </div> 
    </div> 

</form> 

jQuery:

$(document).ready(function() { 

    $('#auth_form').on('submit', function(e) { 
    var auth_code = $('#auth_code_input'); 

    if (!auth_code.val()) { 
     auth_code.closest('.form-group').addClass('has-error'); 
     auth_code.closest('.form-control-feedback').addClass('glyphicon-remove'); 
     e.preventDefault(); 
    } else { 
     auth_code.closest('.form-group').removeClass('has-error').addClass('has-success'); 
     auth_code.closest('.form-control-feedback').addClass('glyphicon-ok'); 
    } 
    }); 

}); 

JSFiddle

Answer 1

ich einige Änderungen in Ihrem HTML und js gemacht, ich glaube, Sie für so etwas suchen:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<form id="auth_form" action="action.php" method="post"> 

    <div class="form-group has-feedback" name="auth_code" id="auth_code"> 
    <label for="auth_code" class="control-label"> 
    <span class='glyphicon' id="iconBad"></span>Authorisation Code</label> 
    <input class="form-control" id="auth_code_input" name="auth_code_input" type="password"> 
    <span class="form-control-feedback glyphicon"></span> 
    </div> 

    <div class="form-group"> 
    <div> 
     <button class="btn btn-info" name="submit" type="submit" id="btnSubmit">Submit</button> 
    </div> 
    </div> 

</form> 

Und js:

$(document).ready(function() { 
    $("#auth_form").submit(function(e){ 
     e.preventDefault() 
    }) 
    $("#btnSubmit").click(function() { 
    var auth_code = $('#auth_code_input').val() 

    if (auth_code=="") { 
     $('#auth_code').addClass('has-error'); 
     $('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove'); 

    } else { 
     $('#auth_code').removeClass('has-error').addClass('has-success'); 
     $('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok'); 
    } 
    }) 
}) 

Denken Sie daran, Sie brauchen unbedingt nicht eine Taste für das Formular haben, können Sie whitout es arbeiten.