尝试检查每个表单输入，并在jquery ajaxform()中清空其默认值

Question

我使用的是ajaxform()插件，到目前为止它工作得很好。但是，我的输入字段有默认值，如果用户只提交未接触的表单，则需要在使用beforeSubmit: callback提交表单之前将它们清除。

简而言之，我不知道检查表单输入字段并在必要时停止提交的语法。我有一个想法，它使用了each()方法和this.defaultValue，也许会返回false？但我不确定细节。

有没有人能给我个建议？谢谢。到目前为止，这是我的代码，我一直坚持使用checkValues()函数。

$(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();        

});

和我的表单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

您正在滥用默认值作为标签。这给您带来了问题。与其试图解决这些问题，我建议解决问题的原因。

设置默认值时-将默认值设置为。不要使用默认值作为伪标签。请改用<label>元素。

Answer 2

你没看过documentation吗

beforeSubmit:表单提交前要调用的回调函数。'beforeSubmit‘回调可以作为钩子提供，用于运行预提交逻辑或验证表单数据。如果'beforeSubmit‘回调返回false，则不会提交表单。“beforeSubmit”回调是用三个参数调用的:数组格式的表单数据、表单的jQuery对象和传递给ajaxForm/ajaxSubmit的Options对象。表单数据数组采用以下格式：

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

Default value: null 

Answer 3

这里的想法，还没有检查它。

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