如果jQuery語句| 空文字框

Question

好吧，在過去的一個小時里，我一直在努力地弄清楚這一點，它是如此簡單，我從未遇到過任何問題。 因此，輸入“ username_input”具有jQuery if狀態，即

if($('#username_input').val() == 0) {
    alert('Empty');
} else {
    alert('Not empty');
}

之后，它移到“ password_input” if語句上，這是一回事，但它會不斷提醒“空”。 為什么？

<!doctype html>
<html>
    <head>
        <title> Awflicks </title>
        <meta name=viewport content="width=device-width, initial-scale=1">
        <link type="text/css" rel="stylesheet" href="index.css">
    </head>

    <body>
        <div id="body_div">
            <form action="" method="post">
                <div id="username_div"> Username:  <input type="text" name="username" id="username_input"> </div>
                <div id="password_div"> Password: <input type="password" name="password" id="password_input"> </div>
                <div id="retype_password_div"> Retype password: <input type="password" name="retype_password" id="retype_password_input"> </div>
                <div type="submit" id="submit_button"> Create Account </div>
            </form>
        </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script>
                var $username = $('#username_input').val();
                var $password1 = $('#password_input').val();
                var $password2 = $('#retype_password_input').val();

                    function create_account() {
                        if($username == 0) {
                            alert('empty');
                        } else {
                            alert('not empty')
                        }
                    }

                $('#submit_button').click(function() {
                    create_account();
                    document.forms[0].submit();
                })
        </script>
    </body>
</html>

Answer 1

因為帶有值的變量在值更改時不會更新。 讀取時的值。 您需要在需要時讀取該值，或將變量設置為onchange。

另外，由於未設置任何值，因此不確定該值將如何為零。 你不應該檢查長度嗎？ 您將要從驗證函數返回布爾值，以便您知道要取消表單提交。

Answer 2

您可以直接使用它而無需定義變量

if(!$('#username_input').val()) // or if(!$('#password_input').val()) for password input
{
   alert('empty');
} else {
   alert('not empty')
}

Answer 3

您需要進行如下重構，以確保$ username僅在提交輸入后才存儲值（例如，一旦按下了提交）

function create_account() {
   var $username = $('#username_input').val();
   var $password1 = $('#password_input').val();
   var $password2 = $('#retype_password_input').val();
   if($username == 0) {
      alert('empty');
   } else {
      alert('not empty')
   }
}

Answer 4

在做出其他答案所建議的更改之后，即使警報顯示“ Empty”，也總是存在提交表單的問題。 實際上，當警報顯示“不為空”時，它將兩次提交。 那是因為您的“ submit_button”具有type="submit"所以它提交了表單。 您可以更改為type="button" ，但是我的偏好是將處理程序綁定到表單的commit-event而不是button的click-event。

$('form').submit(function(event) {
    event.preventDefault(); // Stop the form from getting submitted.

    var username = $('#username_input').val();
    var password1 = $('#password_input').val();
    var password2 = $('#retype_password_input').val();

    var isValid = true;

    if (username == '') {
        alert('Empty');
        isValid = false;
    }

    if (isValid) {
        this.submit(); // Now submit the form.
    }
});

如果jQuery語句| 空文字框

問題描述

4 個解決方案

解決方案1
1 2015-09-08 00:47:14

解決方案2
1 2015-09-08 00:52:29

解決方案3
0 2015-09-08 00:48:59

解決方案4
0 2015-09-08 01:25:52

如果jQuery語句| 空文字框

問題描述

4 個解決方案

解決方案1 1 2015-09-08 00:47:14

解決方案2 1 2015-09-08 00:52:29

解決方案3 0 2015-09-08 00:48:59

解決方案4 0 2015-09-08 01:25:52

解決方案1
1 2015-09-08 00:47:14

解決方案2
1 2015-09-08 00:52:29

解決方案3
0 2015-09-08 00:48:59

解決方案4
0 2015-09-08 01:25:52