如果字段為空，jquery會阻止表單提交？

Question

我使用以下代碼嘗試更改輸入框的邊框顏色，並阻止表單提交如果字段為空。

雖然這改變了邊框顏色，表格仍然提交，有人可以告訴我我在哪里出錯了，在此先感謝

<div class="home_column">
    <div class="login_form">
        <form name="login" id="login" action="include/validate_login.php" method="post" onsubmit="return validateForm()"> 
            <h21>Username</h21><br/>
            <input type="text" class="login_form_front" id="myusername" name="myusername"><br/>

            <h21>Password</h21><br/>
            <input type="password" class="login_form_front" autocomplete="off"  id="mypassword" name="mypassword"><br/>

            <input type="submit" class="buttons_login" value="Login" id="login" name="login">
        </form> 
    </div>
</div>

function validateForm() {
    var a = document.forms["login"]["myusername"].value;
    var b = document.forms["login"]["mypassword"].value;
    if (a == null || a == "" || b == null || b == "") {
        if (a == null || a == "") { 
            document.forms["login"]["myusername"].style.borderColor = "#963634"; 
        }
        if (b == null || b == "") { 
            document.forms["login"]["mypassword"].style.borderColor = "#963634"; 
        }

        $(".form_error").show();
        $('html,body').animate({
            scrollTop: $(".form_error").offset().top - 180 
        });

        return false;
    }
}

Answer 1

這一行有錯誤：

scrollTop: $(".form_error").offset().top - 180 

未捕獲的TypeError：無法讀取未定義的屬性“top”
那是因為你提供的html代碼中不存在form_error。

這會使代碼在return false行之前中斷並通過錯誤。
其他一切都還可以

Answer 2

將事件對象傳遞給事件處理程序並使用event.preventDefault而不是return false;

onsubmit="validateForm(event);"> 

function validateForm(event) {
  // your code
   if(conditionToStopSubmit) 
       event.preventDefault();
}

Answer 3

你有一個奇怪的混合jQuery和普通的JS代碼。 試試這個，將事件附加到jQuery中的表單提交，並使用preventDefault在輸入為空時停止發出請求：

<form name="login" id="login" action="include/validate_login.php" method="post">
    <!-- your HTML -->
</form> 

$('#login').submit(function(e) {
    var formValid = true;
    var $username = $('#myusername');
    var $password = $('#mypassword');

    if ($username.val() == '') {
       formValid = false;
       $username.css('border-color', '#963634');
    }
    if ($password.val() == '') {
       formValid = false;
       $password.css('border-color', '#963634');
    }

    if (!formValid) {
        e.preventDefault();
        $(".form_error").show();
        $(document).animate({
            scrollTop: $(".form_error").offset().top - 180 
        });
    }
});

Answer 4

嘗試在輸入文本中添加所需

例

<input type="text" class="login_form_front" id="myusername" name="myusername" required>

Answer 5

既然你正在使用jQuery，為什么不在jQuery中做所有事情呢？ 看看我下面的臟版本：

(function($) {

  $("#login").on("submit", validate);

  function validate(e) {
    var $form = $("#login"),
        $uname = $form.find("input[name='myusername']"), // or $form.find("input.login_form_front") or $form.find("#myusername")
        $pwd   = $form.find("input[name='mypassword']"),
        unameVal = $.trim($uname.val()) || "", // default ""
        pwdVal = $pwd.val() || "", // no trimming as pwd could be spaces
        isValid = true;
    if (!unameVal) {
        $uname.css({ borderColor: 'red' });
        isValid = false;
    }
    if (!pwdVal.length) {
        $pwd.css({ borderColor: 'red' });
         isValid = false;
    }
    if (!isValid) {
        e.preventDefault();
    }
  }
}(jQuery));

現場演示： 驗證表單提交

Answer 6

 <div class="home_column"> <div class="login_form"> <form name="login" id="login" action="include/validate_login.php" method="post" onsubmit="return validateForm()"> <h21>Username</h21><br/> <input type="text" class="login_form_front" id="myusername" name="myusername" required><br/> <h21>Password</h21><br/> <input type="password" class="login_form_front" autocomplete="off" id="mypassword" name="mypassword" required> <br/> <input type="submit" class="buttons_login" value="Login" id="login" name="login"> </form> </div> </div> 

嘗試此代碼，並確保您的瀏覽器是最新的。

在這里，我剛剛添加了一個足夠的關鍵字“required”。