模态表单在提交时显示错误并阻止其关闭

Question

This is my html code for my modal form.

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

And this is also my php code.

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>';          
        }
}

Is there anyway I can show the error inside my modal form without closing it? I have this also ShowAlertWarning() function that it will display in my modal form without refreshing my page.

Answer 1

take type="submit" off of the submit button. That is whats closing the form. Then instead add to the input onclick="yourCustomFunctionHere()" and write a function with JS that will check for fields to not be empty and only submit it if they are all full.