模態表單在提交時顯示錯誤並阻止其關閉

Question

這是我的模式形式的html代碼。

<form  action="" class="cd-form" method="POST" id="signinform" onsubmit="return: false;">
    <p class="fieldset" id="warningPanel">
        <?php ShowAlertWarning(); ?>
    </p> 
    <p class="fieldset">
        <label class="image-replace cd-username" for="signin-username">Username</label>
        <input class="full-width has-padding has-border" id="signin-username" name="login_username" type="text" placeholder="Username" required>
        <span class="cd-error-message">Error message here!</span>
    </p>
    <p class="fieldset">
        <label class="image-replace cd-password" for="signin-password">Password</label>
        <input class="full-width has-padding has-border" id="signin-password" name= "login_password" type="password"  placeholder="Password" required>
        <span class="cd-error-message">Error message here!</span>
    </p>
    <div id="remember">
        <p class="fieldset">
            <input type="checkbox" id="remember-me" >
            <label for="remember-me">Remember me</label>
        </p>
    </div>
    <input class="full-width" type="submit" name="login" value="Login" id="signin_button">
</form>

這也是我的php代碼。

if(isset($_POST['login'])){ 
    $username = stripslashes($_POST['login_username']);
    $password = stripslashes($_POST['login_password']);

    $username = mysql_real_escape_string($username);
    $password = mysql_real_escape_string($password);


    $sql = "SELECT user.userID, user.password, profile.firstname FROM user, profile  WHERE username = '$username' AND user.userID = profile.userID";
    $result = $con->query($sql);

    if($result->num_rows > 0){

        while($row = $result->fetch_assoc()){

            $chk_password = $row['password'];
            $chk_firstname = $row['firstname'];
            $userID = $row['userID'];
            $_SESSION['userID'] = $userID;
            if(password_verify($password, $chk_password)){
                $_SESSION['username_logged_in'] = true;

                if(empty($chk_firstname))
                    header('Location: profile.php');
                else
                    header('Location: ' . $_SERVER['HTTP_REFERER']);
            }
        }
    }
    else{
          $showWarning = true;
          session_destroy();
        }
}

function ShowAlertWarning(){

        global $showWarning;
        $newShowWarning = $showWarning;

        if($newShowWarning){
            echo '<div class="alert alert-dismissible alert-danger form-feedback">';
            echo '<button type="button" class="close" data-dismiss="alert">x</button>';
            echo '<strong>Oh snap!</strong> Wrong username or password, please try again.';
            echo '</div>';          
        }
}

無論如何，我可以在不關閉模態表單的情況下顯示錯誤嗎？ 我還有這個ShowAlertWarning()函數，它將以我的模式形式顯示而不刷新我的頁面。

Answer 1

從提交按鈕中取消type="submit" 。 那就是關閉表格的原因。 然后改為在輸入中添加onclick="yourCustomFunctionHere()"並使用JS編寫一個函數，該函數將檢查字段是否為空，並且僅在字段已滿時才提交。