So zeigen Sie die Fehlermeldung an

Question

Wenn ich auf die Schaltfläche klicke Ich möchte die Felder validieren und wenn es irgendwelche Fehler gibt, möchte ich Benutzer Fehlermeldung oben anzeigen.

Ich bestätige, aber ich kann die Fehlermeldung nicht anzeigen. Wo genau ist das Problem?

$(document).on('click', '#button', function() { 
 
    var FirstName = $('#fName').val(); 
 
    alert(FirstName); 
 
    var LastName = $('#lName').val(); 
 

 

 
    if (FirstName.val() == '') { 
 
    $("#error").append("Please enter First Name"); 
 
    } else if (LastName.val() == '') { 
 
    $("#error").append("Please enter Last Name"); 
 
    } 
 
});

<div data-role="content" style="padding: 15px;margin-top:21px"> 
 
    <p id="error"></p> 
 
    <label for="text">First Name:</label> 
 
    <input type="text" name="text" id="fName"> 
 
    <label for="text">Last Name:</label> 
 
    <input type="text" name="text" id="lName"> 
 
    <a href="" data-role="button" id="button" onclick="dtlsSubmit()">SUBMIT</a> 
 
</div>

Answer 1

$(document).on('click', '#button', function() { 
 
    var FirstName = $('#fName').val(); 
 
    var LastName = $('#lName').val(); 
 

 

 
    if (FirstName == '') {//remove .val() 
 
    $("#fnameerror").show(); 
 
    } else if (LastName == '') {//remove .val() 
 
    $("#lnameerror").show(); 
 
    } 
 
});

.error{ 
 
    
 
    display:none 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-role="content" style="padding: 15px;margin-top:21px"> 
 
    <p id="error"></p> 
 
    <span id='fnameerror' class='error'>Please eneter First Name</span> 
 
    <label for="text">First Name:</label> 
 
    <input type="text" name="text" id="fName"> 
 
    <span id='lnameerror' class='error'>Please eneter Last Name</span> 
 
    <label for="text">Last Name:</label> 
 
    <input type="text" name="text" id="lName"> 
 
    <a href="#" data-role="button" id="button" ">SUBMIT</a> 
 
</div>

hinzufügen Spanne mit Fehlermeldung dann angezeigt, wenn die

Answer 2

Das Hauptproblem ist, weil Sie die Firstname und Lastname Variablen auf die String-Werte der Elemente, dann in den if Bedingungen versuchen Sie erneut val() auf rufen, was jetzt ist eine Zeichenfolge , was zu einem Fehler führen wird, da diese Methode nicht existiert.

Wenn es keine Fehler aufgetreten sind (dh alle Felder haben einen Wert.) Sie können dann Ihre dtlsSubmit() Methode aus dem Ereignishandler jQuery nennen, wie folgt aus:

$(document).on('click', '#button', function(e) { 
 
    e.preventDefault(); // stop the link being followed 
 
    var $error = $('#error').empty(); // remove any errors added on the previous click 
 
    var error = false; 
 
    
 
    if ($('#fName').val() == '') { 
 
    error = true; 
 
    $error.append("<p>Please enter First Name</p>"); 
 
    } 
 
    
 
    if ($('#lName').val() == '') { 
 
    error = true; 
 
    $error.append("<p>Please enter Last Name</p>"); 
 
    } 
 

 
    if (!error) 
 
    dtlsSubmit(); 
 
}); 
 

 
function dtlsSubmit() { 
 
    console.log('dtlsSubmit...'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-role="content" style="padding: 15px;margin-top:21px"> 
 
    <p id="error"></p> 
 
    <label for="text">First Name:</label> 
 
    <input type="text" name="text" id="fName"> 
 
    <label for="text">Last Name:</label> 
 
    <input type="text" name="text" id="lName"> 
 
    <a href="" data-role="button" id="button">SUBMIT</a> 
 
</div>

Beachten Sie, dass Ich änderte den Logikfluss leicht, so dass alle Fehler auf Klick auf a angezeigt werden, anstatt der ersten aufgetretenen. Dadurch kann der Benutzer alle Probleme sofort erkennen und beheben, ohne wiederholt auf die Schaltfläche klicken zu müssen, um den nächsten Fehler zu finden.

Answer 3

Hier Bedingung entsprechen ist mein Vorschlag - die Inline-Klick entfernen und legen Sie sie in die Validierung

function dtlsSubmit() { 
 
    // here you can send the data 
 
} 
 
$(document).on('click', '#button', function(e) { 
 
    e.preventDefault(); // cancel click 
 
    var FirstName = $('#fName').val(); 
 
    var LastName = $('#lName').val(); 
 
    var error = ""; 
 
    if ($.trim(FirstName) == '') { 
 
    error += "Please enter First Name<br/>"; 
 
    } 
 
    if ($.trim(LastName) == '') { 
 
    error += "Please enter Last Name<br/>"; 
 
    } 
 
    $("#error").html(error); // empty if no error 
 
    if (error=="") { 
 
    dtlsSubmit(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-role="content" style="padding: 15px;margin-top:21px"> 
 
    <p id="error"></p> 
 
    <label for="text">First Name:</label> 
 
    <input type="text" name="text" id="fName"> 
 
    <label for="text">Last Name:</label> 
 
    <input type="text" name="text" id="lName"> 
 
    <a href="" data-role="button" id="button">SUBMIT</a> 
 
</div>