How to do real time validation using jquery to my existing normal validation to contact form?

the ajax request with the form data is responsible

So what is the non-ajax form submit supposed to achieve?

Best practice is to have the form be capable of working without Ajax. And to then use Ajax to help improve the user experience.

1 Like

Here’s an example of what tends to be done when it comes to creating forms.

A simple form

The following is a simple example of a form.

<form action="subscribe.php">
  <h3>Subscribe to our Newsletter!</h3>
  <p>
    <label for="firstname">First name:</label>
    <input id="firstname" name="firstname">
  </p>
  <p>
    <label for="surname">Surname:</label>
    <input id="surname" name="surname">
  </p>
  <p>
    <label for="email">Email:</label>
    <input id="email" name="email">
  </p>
  <p>
    <input type="submit" value="Subscribe!">
  </p>
</form>

The backend code for subscribe.php is where the form information is validated before adding it to a database and sending out a welcome email.

And, the id attributes are only so that the label can find the input field. While it is possible to nest inputs inside of labels, there are accessibility problems with screen readers that result in separate labels and inputs being the better solution.

HTML5 validation

We can now add some client-side HTML5 validation by telling the email that it’s supposed to be an email address, and that it, along with the name, are required fields.

    <!--<input id="firstname" name="firstname">-->
    <input id="firstname" name="firstname" required>
  ...
    <!--<input id="email" name="email">-->
    <input id="email" name="email" type="email" required>
  </p>

The form now refuses to submit if a first name is missing, or if there’s a malformed email address.

2019-02-01

Notice also that no JavaScript is required at all to achieve this level of validation.

I tend to find that the most reliable code is the JavaScript code that doesn’t need to be written.

2 Likes

thank you for your help, its working properly now

I was going to follow up by saying that the next tempting stage of validation is using client-side scripting code, but a major problem exists there in that you then have two different sets of validation, that easily become different from each other.

The better solution instead is to move the PHP validation code out to a separate file, so that it can be accessed by both an Ajax query and by the normal submit event of the form too. That then results in the code working across a much wider range of environments, with live-ajax validation, and with not a single line of client-side validation code ever needing to be written either.

1 Like

That seems interseting but I simply used remote validation and it works for me exactly in the way I want , Thanks for helping me again .

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.