CODEWITHSUNDEEP
jquerytwitter-bootstrapjquery-validate
Kanery
Kanery

Reputation: 101

Bootstrap Form Validation with jQuery

I've been trying to validate a Form with bootstrap and jQuery. I've looked at the other similar questions on here but none of the solutions were able to fix my problem. My current code is

<form>
 <div class="form-group">
     <label class="control-label" for="email">Email:</label>
     <div class="input-group">
         <input class="form-control" placeholder="Enter your email address" name="emailAdd" type="text" />
     </div>
  </div>
  <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
             <input class="form-control" placeholder="Enter your password" name="passWord" type="text" />
        </div>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

And my Script is this 

$("form").validate({
rules: {
    emailAdd: {
        required: true
    },
    passWord: {
        required: true
    }
},
highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
}
});

I'm really lost as to why this is not working and have tried so many different solutions I've seen online. If anybody would be able to point me in the right direction I'd appreciate it!

EDIT:

I reference jQuery and validate plug in like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Ideally, I want to be able to limit the logins and signups to certain email domains. So I thought this would be a good way to start. The email and password fields must be filled with some value before submit is pressed. If not, I want to highlight the box red and say 'Field is Required', or something similar. Currently when I press the submit button, the page just refreshes.

Sorry for not providing enough information in my original post!

Upvotes: 1

Views: 937

Answers (2)

Juan Caicedo
Juan Caicedo

Reputation: 1523

Hello you have one problem loading dependencies. jquery.validate.js requires jquery.js you must load in order.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>

And your are not using email validations, you need add the property email:true

emailAdd: {
        required: true,
        email: true
    },

See how it works on:

https://jsfiddle.net/gph2Lz2z/

Good day!

Upvotes: 2

Sachithra Dilshan
Sachithra Dilshan

Reputation: 105

try this in html

<form action="#" onsubmit="submitForm();return false">


<div class="form-group">
     <label class="control-label" for="email">Email:</label>
     <div class="input-group">
         <input class="form-control" placeholder="Enter your email address" name="emailAdd" type="text" id="email" required/>
     </div>
  </div>
  <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
             <input class="form-control" placeholder="Enter your password" name="passWord" type="text" id="password" required/>
        </div>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

in jquery

function submitForm(){
var email = $('#email').val();
var password= $('#password').val();
}

Upvotes: 0

Related Questions