preventing bootstrap modal from disappearing in case validation failure

Question

I'm trying to stop bootstrap modal from disappearing in case there is any invalid data entered by user.

my php validation code is:

if (isset($_POST['submit'])) {

    $conn = new mysqli("localhost", "ahmesmat", "ZainMalek3110", "SignUpsIroners");

    if ($conn->connect_error) {

            die("Connection failed: " . $conn->connect_error);

    } else
        if (!$_POST['lname'])
            $error="</br>Your first name.";

        if (!$_POST['fname'])
            $error.="</br>Your last name.";

        if (!$_POST['email']) 
            $error.="</br>Your email address.";

        if (!(isset($_POST['day']) && isset($_POST['month']) && isset($_POST['year'])))
            $error.="</br>Your full date of birth.";

        if (!$_POST['phone']) 
            $error.="</br>Your phone number.";

        if (!$_POST['ssn']) 
            $error.="</br>Your social security number.";

        if (!$_POST['staddress']) 
            $error.="</br>Your street address.";

        if (!$_POST['city']) 
            $error.="</br>Your city.";

        if (!$_POST['state']) 
            $error.="</br>Your state.";

        if (!$_POST['zcode']) 
            $error.="</br>Please enter your zip code.";

        if (!$_POST['country']) 
            $error.="</br>Your country.";

        if (!$_POST['radio']) 
            $error.="</br>Tell us if you have an iron or planning to get one.";

}
if (isset($error)) {
    $flag=1;        

}

after the validation the php should return a flag in case of validation failure. The below script should read the flag and retrieve the modal, including the data previously entered by the user:

<script>
//this will launch the modal the first time
$(window).load(function(){
    $('#myModal').modal('show');
});

//this was suppose to retrieve the modal    
$.ajax({
    url:"signupstore.php"
}).done(function() {    
    var flag='<?php echo json.encode($flag); ?>';

    if (flag==1) {
        $('#myModal').modal('show');
    }
});

this obviously did not work. Any suggestions?

Answer 1

Server-side code

<?php
$error = '';
if (isset($_POST['submit'])) {
    $conn = new mysqli("localhost", "ahmesmat", "ZainMalek3110", "SignUpsIroners");
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }else{
        if (!$_POST['lname'])
            $error="</br>Your first name.";

        if (!$_POST['fname'])
            $error.="</br>Your last name.";

        if (!$_POST['email']) 
            $error.="</br>Your email address.";

        if (!(isset($_POST['day']) && isset($_POST['month']) && isset($_POST['year'])))
            $error.="</br>Your full date of birth.";

        if (!$_POST['phone']) 
            $error.="</br>Your phone number.";

        if (!$_POST['ssn']) 
            $error.="</br>Your social security number.";

        if (!$_POST['staddress']) 
            $error.="</br>Your street address.";

        if (!$_POST['city']) 
            $error.="</br>Your city.";

        if (!$_POST['state']) 
            $error.="</br>Your state.";

        if (!$_POST['zcode']) 
            $error.="</br>Please enter your zip code.";

        if (!$_POST['country']) 
            $error.="</br>Your country.";

        if (!$_POST['radio']) 
            $error.="</br>Tell us if you have an iron or planning to get one.";
    }
}
if ($error != '') {
    echo $error;   
}else{
    return true;    
}
?>

Client-side code

<script>
//this will launch the modal the first time
$(document).ready(function(){
    $('#myModal').modal('show');
    $.ajax({
      url: 'signupstore.php',
      type: 'POST',
      data: {email: 'your_email', country: 'your country'}, // pass your data here
      success: function(data) {
        //called when successful
        if(data != ''){
            $('.error').html(data); // add a div to display the return errors
        }else{
            $('#myModal').modal('hide');
        }
      }
    });    
});
</script>

I hope this helps.