Trying to check each form input and blank its default value in jquery ajaxform()

Question

I am using the ajaxform() plugin, which so far is working well. However, my input fields have default values, and if the user just submits the untouched form, I need to blank them out before the form is submitted using the beforeSubmit: callback.

In nutshell, I don't know the syntax to check the forms input fields and stop the submit if necessary. I have an idea its using the each() method and this.defaultValue, and maybe a return false? but I'm not sure of the details.

Could anyone perhaps give me an idea? Thanks. Heres my code so far, its the checkValues() function that I'm stuck with.

$(document).ready(function(){


    //========= Functions =========


    function styleForm() {
     $('.quickcontact label').hide();
     $('input[type="text"],textarea').addClass("idleField");
     $('input[type="text"],textarea').focus(function() {
     $(this).removeClass("idleField").addClass("focusField");
      if (this.value == this.defaultValue){ 
       this.value = '';
      }
      if(this.value != this.defaultValue){
       this.select();
      }
     });
     $('input[type="text"],textarea').blur(function() {
      $(this).removeClass("focusField").addClass("idleField");
      if ($.trim(this.value) == ''){
       this.value = (this.defaultValue ? this.defaultValue : '');
      }
     });
    }


    //options for ajaxform() function   
    var options = { 
     target:        '.quickcontactDisplay',   // target element(s) to be updated with server response 
     beforeSubmit:  checkValues,  // pre-submit callback 
     success:       reBind  // post-submit callback 

     // other available options: 
     //url:       url         // override for form's 'action' attribute 
     //type:      type        // 'get' or 'post', override for form's 'method' attribute 
     //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
     //clearForm: true        // clear all form fields after successful submit 
     //resetForm: true        // reset the form after successful submit 

     // $.ajax options can be used here too, for example: 
     //timeout:   3000 
    };       

    //rebinds the ajax functionality to updated form html
    function reBind() {
        // re-do the form, as it has just been replaced
     $('form.quickcontact').ajaxForm(options);
     styleForm();
    }

    //checks for default values of form on submit to prevent them being submitted 
    function checkValues(){

    } 

    // ==== logic =====

    $('form.quickcontact').ajaxForm(options);
    styleForm();     

});

And my form html:

<form action="/enquiries/add" method="post" id="EnquiryAddForm" class="quickcontact">

  <input type="hidden" value="POST" name="_method"/>
  <input type="hidden" id="EnquiryVisitorId" value="276" name="data[Enquiry][visitor_id]"/>
  <input type="text" id="EnquiryName" maxlength="200" value="Your name" name="data[Enquiry][name]"/>
  <input type="text" id="EnquiryEmailAddress" maxlength="200" value="Your Email" name="data[Enquiry][emailAddress]"/>
  <textarea id="EnquiryEnquiry" rows="6" cols="30" name="data[Enquiry][enquiry]">Your Email Address</textarea>
  <input type="submit" value="Ok, I'm done"/>
</form>

Answer 1

Haven't you looked at the documentation?

beforeSubmit: Callback function to be invoked before the form is submitted. The 'beforeSubmit' callback can be provided as a hook for running pre-submit logic or for validating the form data. If the 'beforeSubmit' callback returns false then the form will not be submitted. The 'beforeSubmit' callback is invoked with three arguments: the form data in array format, the jQuery object for the form, and the Options Object passed into ajaxForm/ajaxSubmit. The array of form data takes the following form:

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

Default value: null

Answer 2

Here the idea, didn't check it yet.

function checkValues(formData, jqForm, options)
{
   for( var i in formData)
      if ( formData[i].value == "")
          return false;
   return true;
}

Answer 3

sounds as if you need to:

1. run through all the inputs / textarea at the start and grab the default values, then stick it into an associative array with the element id as key
2. within checkValues, iterate through inputs once again and compare the pre-submit value against your array - when finding a match, you can set the value to "".