After jquery validation form action isn't call. Please check and give comments for what kind of error was occured in below code

Question

1.00/5 (1 vote)

See more:

<html>
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type='text/javascript' src='jquery.min.js'></script>
  <style>
  form label {
  display: inline-block;
  width: 100px;
}

form div {
  margin-bottom: 10px;
}

.error {
  color: red;
  margin-left: 5px;
}

label.error {
  display: inline;
}
</style>
</head>
<body>
<!-- First Form -->
<h2>Example 1:</h2>
<form id="first_form" method="post" action="res.php">
  <div>
    <label for="first_name">First Name:</label>
    <input type="text" id="first_name" name="first_name"></input>
  </div>
  <div>
    <label for="last_name">Last Name:</label>
    <input type="text" id="last_name" name="last_name"></input>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"></input>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

<script>
$(document).ready(function() {

  $('#first_form').submit(function(e) {
    e.preventDefault();
    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var email = $('#email').val();
    var password = $('#password').val();
    
    

    $(".error").remove();

    if (first_name.length < 1) {
      $('#first_name').after('<span class="error">This field is required</span>');
      
    }
    if (last_name.length < 1) {
      $('#last_name').after('<span class="error">This field is required</span>');
            
    }
    if (email.length < 1) {
      $('#email').after('<span class="error">This field is required</span>');
      
    } else {
      var regEx = /^[A-Za-z0-9_\-\.]+\@[A-Za-z0-9_\-\.]+\.[a-z]{2,3}$/;
      var validEmail = regEx.test(email);
      if (!validEmail) {
        $('#email').after('<span class="error">Enter a valid email</span>');
      }
    }
    if (password.length < 8) {
      $('#password').after('<span class="error">Password must be at least 8 characters long</span>');
      }
     
   
  });

});
</script>

</body>
</html>

What I have tried:

After jquery validation form action isn't call. Please check and give comments for what kind of error was occured in below code

Posted 1-Apr-19 2:27am

Member 14207176

Updated 4-Apr-19 7:23am

v2

Add a Solution

Comments

Nirav Prabtani 1-Apr-19 8:32am

What is an error, Have you check in console by inspecting the element ?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Gerry Schmitz · Answer 1 · 2019-04-01T10:30:00

Solution 1

$('#first_form').submit(function(e) {
    e.preventDefault();
...
}

event.preventDefault() | jQuery API Documentation[^]

To trigger the submit event on the first form on the page:

$( "form:first" ).submit();

.submit() | jQuery API Documentation[^]

Posted 1-Apr-19 10:30am

Gerry Schmitz

Updated 1-Apr-19 10:33am

v2

Comments

Member 14207176 2-Apr-19 1:40am

Hi Gerry,

I have tried this code '$( "form:first" ).submit();' also, after apply this code form isn't validated and directly to call form action parameter.

Kindly to give well working code for me. I think some code only to add in my jquery validation code. I don't know what is exactly needed for me.

Please to check and execute my code. To advise me what mistake is done in my jquery code.

Richard Deeming · Answer 2 · 2019-04-04T07:24:00

As Gerry pointed out, you're preventing the form from being submitted whether or not there are any validation errors.

You need to change your code so that it only prevents the form from being submitted if there are validation errors. If there are no validation errors, it should allow the form to be submitted.

For example:

$(function() {
    $('#first_form').submit(function(e) {
        // e.preventDefault(); // Remove this line
        
        $("#first_form .error").remove();
        
        ... VALIDATION CODE HERE ...
        
        // If there are any errors, prevent the form from being submitted:
        if ($("#first_form .error").length) {
            e.preventDefault();
        }
    });
});

Personally, I'd recommend switching to the jQuery Validation plugin instead:
jQuery Validation Plugin | Form validation with jQuery[^]

Or use the built-in form validation attributes:
Form data validation - Learn web development | MDN[^]