CODEWITHSUNDEEP
jqueryjquery-validate
Rama Krishna
Rama Krishna

Reputation: 285

Jquery validator not working with empty form submission

This is my code:

<!DOCTYPE html>
<html>

<head>
  <title>Registration Form Using jQuery - Demo Preview</title>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>

<body>
  <form id="myForm">
    FirstName :
    <br>
    <input type="text" name="fname" minlength="3" id="fname" required>
    <br>LastName :
    <br>
    <input type="text" name="lname" id="lname" minlength="3" required>
    <br>Email :
    <br>
    <input type="email" name="email" id="email" required>
    <br>URL :
    <br>
    <input type="url" name="url" id="url">
    <br>
    <br>
    <input type="button" value="Submit" class="submit">
  </form>
  <script>
    $("#myForm").validate();
  </script>
</body>

</html>

It is just similar to the first form of http://jqueryvalidation.org/files/demo/ It works fine when I entered text in the fields, but when I submit the empty form then Its not giving the validation errors.

Upvotes: 0

Views: 935

Answers (1)

Sparky
Sparky

Reputation: 98738

Your submit button must be a type="submit" if you want validation triggered when it's clicked.

<input type="submit" ....


<!DOCTYPE html>
<html>

<head>
  <title>Registration Form Using jQuery - Demo Preview</title>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>

<body>
  <form id="myForm">
    FirstName :
    <br>
    <input type="text" name="fname" minlength="3" id="fname" required>
    <br>LastName :
    <br>
    <input type="text" name="lname" id="lname" minlength="3" required>
    <br>Email :
    <br>
    <input type="email" name="email" id="email" required>
    <br>URL :
    <br>
    <input type="url" name="url" id="url">
    <br>
    <br>
    <input type="submit" value="Submit" class="submit">
  </form>
  <script>
    $("#myForm").validate();
  </script>
</body>

</html>

Upvotes: 1

Related Questions