Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery+ajax form validation and submission with a twist
    primarykey
    data
    text
    <p>I've cobbled together a jQuery function to validate email and submit the form using ajax. So far the validation function works okay (gives me error messages)</p> <p>But if the user enters valid email, I want my ajax function to run (it's seutp already). Right now I've got a success message when a valid email is entered, but I don't need it--just want the ajax to run. I tried removing the success msg and it got buggy.</p> <p>In short, the email validation works and the ajax works independently--I need them to work together. Sort of like: if there's an error, show the error message, but if the email is validated, run the ajax.</p> <p>Also, here's the jsfiddle - <a href="http://jsfiddle.net/NjDeb/" rel="nofollow">http://jsfiddle.net/NjDeb/</a></p> <pre><code>$(document).ready(function() { $('.error').hide(); $('.success').hide(); $('input#email').css({backgroundColor:"#FFFFFF"}); $('input#email').focus(function(){ $(this).css({backgroundColor:"#FFDDAA"}); $('.success').hide(); $('.error').hide(); }); $('input#email').blur(function(){ $(this).css({backgroundColor:"#FFFFFF"}); }); $(".submit_button").click(function() { function validateEmail(email) { var email = $("input#email").val(); var filter = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{0,4}$/; if(filter.test(email)) { return true; } else { return false; } } if(!validateEmail('email')) { $('.error').show(); return false; } else { $('.success').show(); return false; } $.ajax({ type: "POST", url: "process.php", data: email, success: function() { $('#signup').html("&lt;div id='message'&gt;&lt;/div&gt;"); $('#message').html("&lt;h3&gt;You're signed up. Look for an invite from us soon.&lt;/h3&gt;") .css({color:"#FFFFFF", fontFamily: "Exo, sans-serif", fontSize: "18px", marginTop: "10px", marginRight: "200px", fontWeight:"500"}) .hide() .fadeIn(1500, function() { $('#message').append(""); }); } }); return false; }); });​ </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.
    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