jQuery Validate not working (jqueryvalidation.org) [duplicate]

Question

I have a form, trying to validate using jquery.validate.js but its not working

Form

<form id="login_form" name="login_form" method="post" action="" enctype="multipart/form-data" >
    <div class="form-group">
        <label for="user_email">Email address</label>
        <input class="form-control" id="user_email" name="user_email" type="email"  placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="user_password">Password</label>
        <input class="form-control" id="user_password" id="user_password" type="password" placeholder="Password">
    </div>
    <input type="submit" name="submit" id="submit" value="Login" class="btn btn-primary btn-block" />
</form>

And below is the Javascript/JQuery

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<script src="jquery_validation_1_17_0/dist/jquery.validate.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $("#login_form").validate({
            rules: {
                exampleInputEmail1: {
                    required: true,
                    email: true
                },
                exampleInputPassword1: {
                    required: true
                }
            },
            messages: {
                email: "Please enter a valid email address",
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                }
            }
        });
    });
</script>

I don't know why the validation part is not working.

I have tried some stuff like adding novalidate in form, but i think the function is not getting initiated.

Please help.

$(document).ready(function() { .. please keep eyes on console for errors — Mohamed-Yousef
– Mohamed-Yousef, Commented Dec 11, 2017 at 17:30
@Mohamed-Yousef I have already tried that but no lock :-( when i add console.log inside validation stuff - it gives error — Manoj
– Manoj, Commented Dec 11, 2017 at 17:32
when i add console.log('some text'); before messages: { it gives error that Syntax Error: Missing : After Property id — Manoj
– Manoj, Commented Dec 11, 2017 at 17:36
I think your rules should be rules: { user_email: { required: true }, nameOfYourPasswordField: { required: true } } — BASEER HAIDER JAFRI
– BASEER HAIDER JAFRI, Commented Dec 11, 2017 at 17:38

Felix Haeberle · Accepted Answer · 2017-12-11 17:42:52Z

You had an issue in your rule definition!

You can adress your field's with the name attribute.

Cleaned your input field user_password too.

See my snippet!

$(document).ready(function() {
  $("#login_form").validate({
    rules: {
      user_email: {
        required: true,
        email: true
      },
      user_password: {
        required: true
      }
    },
    messages: {
      email: "Please enter a valid email address",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>


<form id="login_form" name="login_form" method="post" action="" enctype="multipart/form-data">
  <div class="form-group">
    <label for="user_email">Email address</label>
    <input class="form-control" name="user_email" id="user_email" type="email" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" name="user_password" id="user_password" type="password" placeholder="Password">
  </div>
  <input type="submit" name="submit" id="submit" value="Login" class="btn btn-primary btn-block" />
</form>

Collectives™ on Stack Overflow

jQuery Validate not working (jqueryvalidation.org) [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related