Validate signup form in modal bootstrap

Question

I am trying to validate my sign form in a modal box but every time I submit the modal is closing and page refreshing.

I tried to install bootstrap validator but it does not work.

Also i can not get my error messages if e.g email is empty, still reloading everytime and closing my box.

<form id="IDofmyform" action="#" method="POST">
   <div class="form-group">
     <input type="text" name="reg_fullname" class="form-control-form " id="exampleInputEmaillog" placeholder="Full Name" value="<?php
                        if(isset($_SESSION['reg_fullname'])){
                            echo $_SESSION['reg_fullname'];
                        }
                        ?>">
                        <?php if(in_array('Your name is too long. Please include only firstname and lastname', $error_array)) echo 'Your name is too long. Please include only firstname and lastname';
                        else if(in_array('Please enter a valid name' , $error_array)) echo 'Please enter a valid name'; ?>
  </div>    
  <div class="form-group">
    <input type="email" name="reg_email" class="form-control-form " id="exampleInputEmaillog" placeholder="Email" value="<?php
                        if(isset($_SESSION['reg_email'])){
                            echo $_SESSION['reg_email'];
                        }
                        ?>">
</div>
<div class="form-group">
<input type="email" name="reg_email2" class="form-control-form " id="exampleInputEmaillog" placeholder="Confirm Email" value="<?php
                        if(isset($_SESSION['reg_email2'])){
                            echo $_SESSION['reg_email2'];
                        }
                        ?>">
                        <?php if(in_array('Email already in use', $error_array)) echo 'Email already in use';
                        else if(in_array('Invalid Email Format', $error_array)) echo 'Invalid Email Format';
                        else if(in_array('Emails do not match', $error_array)) echo 'Emails do not match'; ?>
</div>
<div class="form-group">
<input type="password" name="reg_password" class="form-control-form " id="exampleInputPasswordpas" placeholder="Password">
</div>    
<div class="form-group">
<input type="password" name="reg_password2" class="form-control-form " id="exampleInputPasswordpas" placeholder="Confirm Password">
                        <?php if(in_array('Your passwords do not match', $error_array)) echo 'Your passwords do not match';
                        else if(in_array('Special characters like "£%^*() are not allowed', $error_array)) echo 'Special characters like "£%^*() are not allowed';
                        else if(in_array('Your password must be between 5 and 20 character', $error_array)) echo 'Your password must be between 5 and 20 character'; ?>
</div>    
<div class="row">   
 <div class="col-md-12">    
   <div class="checkbox">
     <label>
        <input type="checkbox">I’d like to receive emails
     </label>
   </div>
 </div>      
</div>
<button type="submit" name="register_button" class="btn-lgin">Signup</button>
</form>

here is js i used with Validator.js

$('#IDofmyform').bootstrapValidator({
message: 'This value is not valid', 
feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
},
fields: {
    first_name: {
        validators: {
            notEmpty: {
                message: "You're required to fill in a first name!"
                      }, // notEmpty
            regexp: {
                regexp: /^[A-Za-z\s.'-]+$/,
                message: "Alphabetical characters, hyphens and spaces"
            }
                    } // validators
              },  // firstname
    last_name: {
        validators: {
            notEmpty: {
                message: "You've forgotten to provide your last name!"
                      } // notEmpty
                    } // validators
              },  // lastname
    email: {
        validators: {
            notEmpty: {
                message: "An email address is mandatory."
                      }, // notEmpty
            emailAddress: {
                message: "This is not a valid email address"
                            } // emailAddress         
                    } // validators
              },  // email
    comments: {
        validators: {
            notEmpty: {
                message: "Are you sure? No comment?"
                      } // notEmpty
                    } // validators
              } //comments
    } // fields
    });
 $('#myModal').on('shown.bs.modal', function() {
 $('#contactform').bootstrapValidator('resetForm', true);
});

Any feedback would be helpfull

Answer 1

You need to trap the click event on the submit button by adding an onclick handler. With jQuery you can do it like this:

$("<button selector>").click(function(){
    <handler code>
});

In the handler you call preventDefault() for the submit action not to take place. And you also call stopPropagation().

Then you validate your form and call submit on the form or you can fire an ajax request with the login data if everything is ok. Or show an error message in the modal if not.

Answer 2

Your form needs an action url

<form action="action_url" method="POST">

or if you post the data on same page, use like this

<form action="" method="POST">