AJAX with validation engine

Question

It does not validate before AJAX call to send information to DB. How can i activate the Validation first?

$(document).ready(function() {
        $("#signup").validationEngine('attach', {
            promptPosition : "centerRight",
            scroll : false,
            ajaxFormValidation: true,
            onBeforeAjaxFormValidation: beforeCall,
            onAjaxFormComplete: ajaxValidationCallback,
        });
    });




$("#submit").click(function() {
        var url = "insertintoDB.php"; // the script where you handle the form input.
        $.ajax({
               type: "POST",
               url: url,
               data: $("#signupform").serialize(), // serializes the form's elements.
               success: function(data)
               {
                   alert(data); // show response from the php script.
               }
             });

        return false; // avoid to execute the actual submit of the form.
    });

It does direct to insertintoDB.php but does not validate the following form.

<form class="form-horizontal" id="signup" name="signup" method="post" action="insertDB.php">

 <div class="control-group">
 <label class="control-label" for="inputSurname">Name</label>
 <div class="controls"><input type="text" id="inputSurname" name="inputSurname" placeholder="Surname" class="validate[required]" /></div>
 </div>
<button type="submit" id="submit" class="btn btn-success">Sign Up!</button>

</form>

How can I make it validate first before passing into the PHP for data insertion?

... and you should also learn to give the people that help you a little credit by marking the things the help up or correct — Cliff Ribaudo
– Cliff Ribaudo, Commented Mar 31, 2013 at 13:13

Siamak Motlagh · Accepted Answer · 2013-03-30 11:04:57Z

1

You can validate your variables using these validation open source libraries:

jQuery-Form-Validator
Lightweight form validation for jQuery or Zepto.js
jQuery-Validation-Engine

And so on ...

But i strongly recommend you use server side validation before do any database action to prevent SQL-injection and XSS attack.

answered Mar 30, 2013 at 11:04

Siamak Motlagh

5,1547 gold badges47 silver badges66 bronze badges

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

Comments

Cliff Ribaudo · Accepted Answer · 2013-03-30 11:38:31Z

0

Use the jQuery Validator for form validation, with a pattern something like this:

$('form').validate({
    invalidHandler: function(event, validator) {
        // Handle the invalid case.
    },
    submitHandler: function(form) {
       // do stuff on your valid form.
       // Then call form submit.
       form.submit();
    }
});

The validator allows you to set up rules and error messages for various conditions, however it automatically detects missing fields with the 'required' attribute on them and other cases based on type of field. E.g. url - it will require a valid url, etc.

Server side validation is important, but the jQuery validator allows you to catch many things while you still have the users attention and they can easily fix.

See here: jQuery Validator

edited Mar 30, 2013 at 11:38

answered Mar 30, 2013 at 11:01

Cliff Ribaudo

9,0592 gold badges60 silver badges81 bronze badges

5 Comments

Bryan Wong Over a year ago

Cliff Ribaudo Over a year ago

Sorry, missed something out. That should cover it.

Bryan Wong Over a year ago

Pardon my ignorance, but what is the replacement for selector? Is that the name of the form?

Bryan Wong Over a year ago

I am using Jquery Validation Engine

Cliff Ribaudo Over a year ago

Great then that is the pattern. The selector will be anything that contains the form. So for example if you are using jQuery dialog: something like this: $('form', body).validate()... but really it can be anything. $('form', content).validate...

Collectives™ on Stack Overflow

AJAX with validation engine

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related