2016-05-05 2 views
1

その時にボタンをクリックすると詳細を挿入したいのですが、検証したい時に同時にエラーメッセージを表示したいのですが。エラーメッセージを表示する方法

私は妥当性を確認していますが、問題を正確に取得していない場合にエラーメッセージを表示することができません。

$(document).on('click', '#button', function() { 
 
\t var FirstName=$('#fName').val(); 
 
\t alert(FirstName); 
 
\t var LastName=$('#lName').val(); 
 
\t 
 
\t 
 
\t if(FirstName.val() == '') { 
 
\t \t alert("kk") 
 
\t \t $("#error").append("Please eneter First Name"); 
 
\t  } 
 
\t  else if(LastName.val() == '') { 
 
\t   alert("k") 
 
\t \t $("#error").append("Please eneter Last Name"); 
 
\t  } 
 
});
<!DOCTYPE HTML> 
 
<html> 
 
    \t <head> 
 
    \t \t <meta charset="UTF-8"> 
 
    \t \t <title>SSSIT</title> 
 
    \t \t <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 
 
    \t \t <!-- 
 
    \t \t \t <link rel="shortcut icon" href="images/favicon.png"> 
 
    \t \t \t <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
 
    \t \t --> 
 
    \t \t <link href="jqueryMobile/jquery.mobile-1.4.5.css" rel="stylesheet"> 
 
    \t \t <link rel="stylesheet" href="css/main.css"> 
 
    \t \t <script>window.$ = window.jQuery = WLJQ;</script> 
 
    \t \t <script src="jqueryMobile/jquery.mobile-1.4.5.js"></script> 
 
    \t </head> 
 
    \t 
 
    \t <body style="display: none;"> 
 
    \t \t <div data-role="page" id="page"> 
 
\t \t \t \t <div data-role="header" id="header" data-position="fixed"> 
 
\t \t \t \t \t <h3>Softpath Technologies</h3> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div data-role="content" style="padding: 15px;margin-top:21px"> 
 
\t \t \t \t \t <p id="error"></p> 
 
\t \t \t \t \t <label for="text">First Name:</label> 
 
\t \t \t \t \t \t <input type="text" name="text" id="fName"> 
 
\t \t \t \t \t <label for="text">Last Name:</label> 
 
\t \t \t \t \t \t <input type="text" name="text" id="lName"> 
 
\t \t \t \t \t <a href="" data-role="button" id="button" onclick="dtlsSubmit()">SUBMIT</a> 
 
\t \t </div> 
 
\t \t \t \t <div data-role="footer" data-position="fixed" id="footer"> 
 
\t \t \t \t \t <h3></h3> 
 
\t \t \t \t </div> 
 
\t </div> 
 
    \t \t 
 
    \t \t 
 
    \t \t 
 
    \t \t 
 
    \t \t <script src="js/initOptions.js"></script> 
 
    \t \t <script src="js/main.js"></script> 
 
    \t \t <script src="js/messages.js"></script> 
 
    \t </body> 
 
</html>

答えて

1

それはまた、あなたがそうでなければ、あなたの<p>タグに追加するエラーメッセージを見ることはありませんエラーの場合はfalseを返す必要があり

if(FirstName == '') { 
    alert("kk"); 
    $("#error").append("Please eneter First Name"); 
} 
else if(LastName == '') { 
    alert("k") 
    $("#error").append("Please eneter Last Name"); 
} 

でなければなりません。

コードは次のように行く必要があります。

$(document).on('click', '#button', function() { 

    var FirstName = $('#fName').val(); 

    alert(FirstName); 
    var LastName = $('#lName').val(); 
    var valid = 1; 

    if (FirstName == '') { 
     alert("kk") 
     $("#error").append("Please eneter First Name"); 
     valid = 0; 
    } 
    else if (LastName == '') { 
     alert("k") 
     $("#error").append("Please eneter Last Name"); 
     valid = 0; 
    } 
    if (!valid) 
     return false 

    return true; 
}); 
0

あなたはFirstNameの代わりFirstName.val()を使用する必要があります。行var FirstName=$('#fName').val();のために既にFirstNameに値を割り当てており、FirstName.val()にアクセスしている間は、エラーを出す必要があります(デベロッパーツールでコンソールを確認してください)。

は、スニペットを次の点を考慮

if(FirstName == '') { 
    alert("kk") 
    $("#error").append("Please eneter First Name"); 
} 
else if(LastName == '') { 
    alert("k") 
    $("#error").append("Please eneter Last Name"); 
} 
関連する問題