Jquery erstellt eine Funktion, die für die Eingabeüberprüfung verwendet wird

Question

Ich habe hier ein Textfeld, das einen Fehler anzeigt, wenn die Eingabe ungültig ist. Ich wundere mich, wie eine Funktion wird, die den Fehler in zwei Bereichen anzeigt, damit ich Redundanz verhindern kann. Hier ist mein html

<div class="form-group row has-feedback" id="username-group"> 
      <div class="col-sm-4"><label class="control-label">Username</label></div> 
      <div class="col-sm-8"> 
       <div> 
       <input type="text" name="username" id="username" value="<?php echo $username;?>" class="form-control user-required" required> 
       <span id="username-feedback" class="glyphicon form-control-feedback hidden"></span> 
       </div> 
       <div><span class="small font-design error_span"><?php if(isset($usernameErr)){echo $usernameErr;} ?></span></div> 
      </div> 
      </div> 

-Datei und hier ist das, was ich bisher in der Spanne mit Klasse gemacht haben error_span

function checkEmpty(id){ 
    if($(id).val()==""){ 
    $(id)[0].setCustomValidity('Please fill out this field'); 
    $(id).closest('.form-group').find('.error_span').text("Please fill out this field").removeClass("hidden").addClass("text text-danger"); 
    } 
    else{ 
    $(id)[0].setCustomValidity(''); 
    $(id).closest('.form-group').find('.error_span').text("").addClass("hidden").addClass("text text-danger"); 
    } 
} 
$(".user-required").blur(function(){ 
    checkEmpty("#" + $(this).attr('id')); 
}); 

Und mein Code, ich denke, überflüssig sein wird, ist hier. Es wird ein Feedback-Symbol zum Textfeld hinzufügen.

if($("#username").val()==existing){ 
      $("#username-feedback").addClass("glyphicon-remove"); 
      $("#username-feedback").removeClass("glyphicon-ok hidden"); 
      $("#username-group").removeClass("has-success"); 
      $("#username-group").addClass("has-error"); 
      $("#username")[0].setCustomValidity('username not available'); 
      $("#username").closest('.form-group').find('.error_span').text("username not available").removeClass("hidden").addClass("text text-danger"); 
     } 
     else{ 
      $("#username-feedback").addClass("glyphicon-ok"); 
      $("#username-feedback").removeClass("glyphicon-remove hidden"); 
      $("#username-group").removeClass("has-error"); 
      $("#username-group").addClass("has-success"); 
      $("#username")[0].setCustomValidity(''); 
      $("#username").closest('.form-group').find('.error_span').text("").addClass("hidden"); 
     } 
$("#username").blur(function(){ 
    if($("#username").val()==""){ 
     $("#username-feedback").addClass("glyphicon-remove"); 
     $("#username-feedback").removeClass("glyphicon-ok hidden"); 
     $("#username-group").removeClass("has-success"); 
     $("#username-group").addClass("has-error"); 
     $("#username")[0].setCustomValidity('Please fill out this field'); 
     $("#username").closest('.form-group').find('.error_span').text("Please fill out this field").removeClass("hidden").addClass("text text-danger"); 
    } 
    }); 

kann mir jemand helfen Probleme verursachen im mit einer Funktion bei der Schaffung, weil ich

Answer 1

function saveForm(){ 
 
\t \t 
 
\t \t var lenName = $('#nameInput').val().length; 
 
\t \t 
 
\t \t 
 
\t \t if (lenName <= 0) { \t 
 
\t \t \t $(".alert").text("Error submiting the form, please fill all the fields!"); 
 
      $(".alert").show(); 
 
     } 
 
\t \t else{ 
 
\t \t \t $(".alert").hide(); 
 
\t \t \t $("#form").submit(); 
 
\t \t } 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form class="form" action="test.html" method="post" id="form"> 
 

 
\t \t <div class="alert" style="display: none;"></div> 
 
\t \t <input name="name" type="text" class="form-control" id="nameInput" placeholder="Name"> 
 
\t 
 
    <br> 
 
\t <button type="button" onclick="saveForm()">Submit</button> 
 

 
</form>

kleine Wissen über jquery Wähler haben

Sie mehr Überprüfung dieses in der Funktion tun können, ist Ein einfaches Beispiel.