CODEWITHSUNDEEP
jqueryajax
rich
rich

Reputation: 23

How to use ajax to validate my form

Here is my form- 

<h1>Form Validation</h1>

<form id="PersonForm">

Name: <input type="text" id="name" name="name"> <br>

Postal Code: <input type="text" id="postal" name="postal"> <br>

Phone Number: <input type="text" id="phone" name="phone"> <br>

Address: <input type="text" id="address" name="address"> <br>

<input type="submit">

</form>

<a href="frontend.html">Refresh</a> 
<a id="InsertDefault" href="">Insert Default Data</a> 
<br>

<ul id="errors"></ul>
<p id="success"></p>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<?php
if ($_REQUEST['act'] == 'validate')
{
  $validateData = array();

  if (preg_match("/^[A-Za-z]{3,20}$/",$_REQUEST['name'])) $validateData['name'] = 1;
  else $validateData['name'] = 0;

  if (preg_match("/^[0-9]{10}$/",$_REQUEST['phone'])) $validateData['phone'] = 1;
  else $validateData['phone'] = 0;

  if (preg_match("/^[A-Z][0-9][A-Z][0-9][A-Z][0-9]$/",
  	                          $_REQUEST['postal'])) $validateData['postal'] = 1;
  else $validateData['postal'] = 0;

  if (preg_match("/^[0-9]{3} [A-Za-z]{3,10} Street$/",
  	                          $_REQUEST['address'])) $validateData['address'] = 1;
  else $validateData['address'] = 0;

  echo json_encode($validateData);
}
else echo "Should not happen";

?>
</html>

How would I use the validation php script below in ajax to create error lists for each error I get. So if $validateData[name], $validateData[postal] was 0, I want to create a message for each one and put it into the #error.

Upvotes: 0

Views: 55

Answers (1)

dsdenes
dsdenes

Reputation: 1035

$('form').on('submit', function(event) {
  event.preventDefault();

  var formData = $(this).serialize();

  $.getJSON('frontend.html', formData, function(data) {
    if (!data.address) {
      alert('something wrong!');
    }
  });

});

Upvotes: 1

Related Questions