Note that there are some explanatory texts on larger screens.

plurals
  1. POValidate a form before ajax post without jquery validation plugin
    primarykey
    data
    text
    <p>I'm trying to write jquery validation, but I don't want to use a plugin</p> <p>Here's my ajax I would like to know how to implement validation before posting.</p> <pre><code> $('#insert_ticket').submit(function(e){ var postData = $(this).serialize(); alert(postData); $.ajax({ type: 'POST', url: 'http://localhost/api/eric_api.php?q=insertseries', data: postData, success: function(response){ $('#insert_ticket').find('.form_result').html(response); }, error: function(){ alert('error'); } }); e.preventDefault(); }); </code></pre> <p>Ok now I've added a validation test</p> <pre><code>$('#insert_ticket').submit(function(e){ var postData = $(this).serialize(); $('.error').hide(); if($('#user_error').length == ""){ $('.error').show(); return false; } $.ajax({ type: 'POST', url: 'http://localhost/api/eric_api.php?q=insertseries', data: postData, success: function(response){ $('#insert_ticket').find('.form_result').html(response); }, error: function(){ alert('error'); } }); e.preventDefault(); }); </code></pre> <p>My code doesn't work, but if I put it above it's sort of works as it hides the field unless the field is enpty. Yet if it is empty it still posts.</p> <p>Here's my html code</p> <pre><code>&lt;div class="wrapper"&gt; &lt;h1&gt;Ticketing System&lt;/h1&gt; &lt;div&gt; &lt;div id="ticket_form_wrapper"&gt; &lt;form id="insert_ticket" method="post" action=""&gt; &lt;p&gt; &lt;label for="user"&gt;User&lt;/label&gt; &lt;br /&gt; &lt;input type="user" name="user" id="user" class="post_fields" /&gt; &lt;div class="error" id="user_error"&gt;This is a required field&lt;/div&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="email"&gt;Email&lt;/label&gt; &lt;br /&gt; &lt;input type="email" name="email" id="email" class="post_fields" /&gt; &lt;div class="error" id="email_req_error"&gt;This is a required field&lt;/div&gt; &lt;div class="error" id="email_invalid_error"&gt;This is not a valid email&lt;/div&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="summary"&gt;Summary&lt;/label&gt; &lt;br /&gt; &lt;input type="summary" name="summary" id="summary" class="post_fields" /&gt; &lt;div class="error" id="summary_error"&gt;This is a required field&lt;/div&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="due_date"&gt;Due Date&lt;/label&gt; &lt;br /&gt; &lt;input type="due_date" name="due_date" id="due_date" class="post_fields" /&gt; &lt;div class="error" id="invalid_date"&gt;This is not a valid Date&lt;/div&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="problem_type"&gt;Problem Type&lt;/label&gt; &lt;br /&gt; &lt;input type="problem_type" name="problem_type" id="problem_type" class="post_fields" /&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="status"&gt;Status&lt;/label&gt; &lt;br /&gt; &lt;input type="status" name="status" id="status" class="post_fields" /&gt; &lt;/p&gt; &lt;p&gt; &lt;input type="submit" id="submit" value="Submit" /&gt; &lt;input type="button" onclick="window.location='index.php'" value="Go to List"/&gt; &lt;div class="form_result"&gt; &lt;/div&gt; &lt;/p&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload