2

Considering the following very basic form:

 <form action="action_page.php" method="post">
   <input type="text" id="fname" name="fname"><br><br>
   <input type="text" id="lname" name="lname"><br><br>
   <input type="submit" value="Submit">
</form>

I know how to validate and submit this form using jquery ajax. My question: is there anyway I could first validate the form using ajax before submitting it the regular way to the action php file?

I mean the two processes should be the result of the submit action.. ie the script called should first validate and when all ok then submits the page to the file in the form action attribute or to any url I specify. Otherwise it halts form submit returning the error messages.

Thanks

Improve this question
3
  • The submit event listener uses event.preventDefault() and sends an AJAX request to validate it. The AJAX callback function submits the form if the validation is successful. Commented Feb 25, 2021 at 17:28
  • Ideally you should validate before sending the data to the server (if it can be validated locally), to prevent unnecessary requests to the server, and then validate on the server. Commented Feb 25, 2021 at 17:31
  • You can use jquery validation plugin and add a method with ajax validation for that.forum.jquery.com/topic/validation-plugin-addmethod-with-ajax Commented Feb 25, 2021 at 18:34

2 Answers 2

Reset to default
1

This litle code works fine. If your ajax call is ok, then submit form. Is that the question?

Update your form (note type button in place of type submit)

<form name="action" id="action" action="action_page.php" method="post">
   <input type="text" id="fname" name="fname"><br><br>
   <input type="text" id="lname" name="lname"><br><br>
   <input type="button" id="submit_button" value="Submit">
</form>

And your js

$('#submit_button').on('click', function(e) {

  // Do your ajax call
  $.ajax({
    url:'myurl.php',
    type:'GET',
    success: function(data) {
      $('form').submit();// Finally submit
    },
    error: function(xhr, status, error) {
      alert('Ajax error');
    }
  });
  
});

https://jsfiddle.net/p6xrm1d0/14/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hi Monnomcjo, thanks for the reply but it didn't work. Even in my code editor when I type the "this." I get a huge list of autocomplete methods but "submit" is not one of them.
Welcome @techie2604, i updated my answer. It's ok now. Let me know!
0

You can use javascript's onsubmit event.

<form action="action_page.php" method="post" onsubmit="return validateForm()">

and your js function will look something like this

function validateForm(){

 //perform all the validations and based on the validation return true or false.
 
 // you can use JQUERY within this to set the error divs or alerts etc
}
Improve this answer

1 Comment

Thanks Danyal, Technically it works, but I don't want to put my validation code visible in the page source, this is why I am looking for a server-side ajax php validation then when it returns OK (code 200) then it continues submitting to the action php.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.