Question

I have created code which works, it posts, an ajax call. It also posts a success message. I want to add validation to the click function. So it only runs $.ajax if validation is true. I have a form validation script for this.

It is a syntax issue I can not find what though

ajax

  $(document).ready ( function () {
        $('#go').click (function () {


       $.ajax ( {
                type:       'POST',
                data:       $('#newsletter').serialize (),
                url:        $('#newsletter').attr ('action'),
                success:   function(){



                                $('#thankYou').show (
                                    1000,
                                    function () {
                                        setTimeout ( function() { $('#thankYou').hide(1000); }, 3000);
                                    }
                                );


            }

            } );
            return false;
        } );
    } )

I want to run checkform() inside $(‘#go’).click and only if form passes run $.ajax as a callback of checkform.

function checkform() {
  for (i=0;i<fieldstocheck.length;i++) {
    if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].type") == "checkbox") {
      if (document.subscribeform.elements[fieldstocheck[i]].checked) {
      } else {
        alert("Please enter your "+fieldnames[i]);
        eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].focus()");
        return false;
      }
    }
    else {
      if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].value") == "") {
        alert("Please enter your "+fieldnames[i]);
        eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].focus()");
        return false;
      }
    }
  }
  for (i=0;i<groupstocheck.length;i++) {
    if (!checkGroup(groupstocheck[i],groupnames[i])) {
      return false;
    }
  }

  if(! compareEmail())
  {
    alert("Email Addresses you entered do not match");
    return false;
  }
  return true;
}

var fieldstocheck = new Array();
var fieldnames = new Array();
function addFieldToCheck(value,name) {
  fieldstocheck[fieldstocheck.length] = value;
  fieldnames[fieldnames.length] = name;
}
var groupstocheck = new Array();
var groupnames = new Array();
function addGroupToCheck(value,name) {
  groupstocheck[groupstocheck.length] = value;
  groupnames[groupnames.length] = name;
}

function compareEmail()
{
  return (document.subscribeform.elements["email"].value == document.subscribeform.elements["emailconfirm"].value);
}
function checkGroup(name,value) {
  option = -1;
  for (i=0;i<document.subscribeform.elements[name].length;i++) {
    if (document.subscribeform.elements[name][i].checked) {
      option = i;
    }
  }
  if (option == -1) {
    alert ("Please enter your "+value);
    return false;
  }
  return true;
}

markup

<div id="container">
<form id="newsletter"  method="post" action="http://www.officeyoganyc.com/lists/?p=subscribe" name="subscribeform"><input type="hidden" name="formtoken" value="a7d1884b463ed70e91fb62a5121e9846" />

<div id="fieldWrapper">
<div class="fieldHolder">
  <div class="attributeinput1"><input type=text name=email value="email" autofocus="autofocus" autocomplete="on" size="12"/> 
  <script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div> 
  </div>


  <div class="fieldHolder2">
  <div class="attributeinput2"><input type=text name=emailconfirm value="confirm email" autocomplete="off" size="12"/> 
  <script language="Javascript" type="text/javascript">addFieldToCheck("emailconfirm","Confirm your email address");</script></div>
        </div> 
        </div>
  <input type="hidden" name="list[1]" value="signup">
  <input type="hidden" name="listname[1]" value="office yoga list"/>
  <div style="display:none"><input type="text" name="VerificationCodeX" value="" size="20"></div>

<input type="hidden" name="subscribe" value="Subscribe"/>
<div id="subscribe"><input type=image src="http://www.officeyoganyc.com/themes/zen/zen/images/yogaSubmit.png" id="go" name="subscribe" value="Subscribe onClick="return checkform();"></div>
    </form>

    </div>
  <div id="thankYou">Thank You For Signing Up</div>

Answer 1

Alex,

The checkForm function returns a boolean indicating success or failure, then put an if statement as below just above the ajax but inside the click event so you have the ajax called only if checkform gives true, otherwise write the else portion to alert the user to fix whatever is wrong.

if(checkform()) {
   $.ajax(.....)
} else {
   alert("Validation Failed");
}

On a side note, I caution you extremely highly not to rely on the javascript (client-side) validation only – you need to make sure your server script called by the ajax also checks to make sure the form post data hasn’t been doctored to hack you. Forewarned.

R