如何顯示錯誤消息

Question

當我單擊按鈕我想驗證字段，如果有任何錯誤，我想在上面顯示用戶錯誤消息。

我在驗證，但我無法顯示錯誤消息。問題究竟在哪裏？

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

添加錯誤消息的跨度則顯示，如果符合條件

Answer 2

主要的問題是，因爲你設置的Firstname和Lastname變量元素的字符串值，然後在if條件，然後嘗試再次呼籲val()什麼現在是一個字符串，由於該方法不存在，這會出錯。

如果沒有遇到錯誤（即所有領域有一個值。），那麼你可以從jQuery事件處理程序調用你的dtlsSubmit()方法，像這樣：

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

注意我稍微修改了邏輯流程，以便所有錯誤都顯示在點擊a上，而不是第一次遇到。這使用戶能夠立即瞭解所有問題並修復它們，而無需重複點擊按鈕來查找下一個錯誤。

Answer 3

這裏是我的建議 - 刪除內聯點擊，並把它在驗證

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>