how to use liveValidation to validate a form on submit?

Question

I have the following code to validate the form on submit:

<form enctype='multipart/form-data' 
   action='ad_posting_process.php' 
   method='post'>
   Price: <input type=text name=price 
                  id="price" style=width:90px;>
<script type="text/javascript"> 
  var f3 = new LiveValidation('price');
  f3.add( Validate.Numericality );
</script>
Email: <input type=text name=email 
                  id="email" style=width:240px;>
<script type="text/javascript"> 
  var f20 = new LiveValidation('email');
  f20.add( Validate.Email );
</script>
<script type="text/javascript">
  var title = new LiveValidation( 'title', {onlyOnSubmit: true } );
  title.add( Validate.Email );
  var field2 = new LiveValidation( 'price', {onlyOnSubmit: true } );
  field2.add( Validate.Acceptance );
  var field3 = new LiveValidation( 'email', {onlyOnSubmit: true } );
  field3.add( Validate.Presence );
</script>
<input type=submit name=action value=Post>
</form>

the email validation is working, but how to validate the whole form on submit?

Regards:

Kjartan · Answer 1 · 2012-07-03T07:15:02.203

I'm not very familiar with this library, but it seems you should be able to do this by simply adding:

{onlyOnSubmit: true }

as a parameter to each element to validate, eg:

var f20 = new LiveValidation('email');
f20.add( Validate.Email, {onlyOnSubmit: true });

Have you seen this page by the way?: http://livevalidation.com/examples#exampleForms

Also, are you using different script-sections for each element to validate (or are they only cut- and pasted in here this way?). You could probably do all of that in one and the same Script-block.

Update, expanded answer:

There are some issues with your code that you might try to fix, as they may be causing problems for the JS:

Make sure you use " (double quotes, not single!) around all fields (like name="price", etc)
Do you have a field called "title", cause I can't see it - that could be causing the scripts to fail (?).

Make sure you close each html-element in one of these ways.

<input></input>
<input />

Your code could probably look something like this:

<form enctype="multipart/form-data"
  action="ad_posting_process.php" 
  method="post">

Price: <input type="text" name="price"
              id="price" style="width:90px;">
Email: <input type="text" name="email"
              id="email" style="width:240px;">

<script type="text/javascript"> 
var f3 = new LiveValidation('price');
  f3.add( Validate.Numericality );
  var f20 = new LiveValidation('email');
  f20.add( Validate.Email );
  var title = new LiveValidation( 'title', {onlyOnSubmit: true } );
  title.add( Validate.Email );
  var field2 = new LiveValidation( 'price', {onlyOnSubmit: true } );
  field2.add( Validate.Acceptance );
  var field3 = new LiveValidation( 'email', {onlyOnSubmit: true } );
  field3.add( Validate.Presence );
</script>
<input type="submit" name="action" value="Post" />
</form>

Also, check your browser for any javascript related errors. Most modern browsers have some form of error-panel or debugging tool for js.

Dear Kjartan, I have the following code for title, price, and email. But the first 2 are working but the email don't. and where to put the var field3 = new LiveValidation( 'email', {onlyOnSubmit: true } ); field3.add( Validate.Presence ); so the validation is done on submit. — Muhammad Nadeem, Jul 03 '12 at 05:41
According to the documentation found on the page i linked to above, the script-components should automatically attach themselves to the form if they are between the `
` and `
` tags. — Kjartan, Jul 03 '12 at 06:48
Note: I just expanded my answer above; your problems may be just syntax- or DOM-related (structure of the HTML breaking the javascripts). — Kjartan, Jul 03 '12 at 07:16
The following code is between

: but don't ask for empty fields Regards: — Muhammad Nadeem, Jul 03 '12 at 12:30

how to use liveValidation to validate a form on submit?

1 Answers1