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

Question

我正在使用 ajaxform() 插件，目前它运行良好。但是，我的输入字段具有默认值，如果用户只是提交未修改的表单，我需要在使用 beforeSubmit: 回调提交表单之前将它们清空。

简而言之，我不知道检查表单输入字段并在必要时停止提交的语法。我有一个想法，它使用 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' 回调可以是 作为运行的钩子提供 预提交逻辑或用于验证 表格数据。如果“之前提交” 回调返回 false 然后表单 不会提交。这 'beforeSubmit' 回调被调用 带有三个参数：表单中的数据 数组格式，jQuery 对象 表单和选项对象 传递到 ajaxForm/ajaxSubmit。这 表单数据数组采用以下内容 形式：

[ { 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;
} 

Answer 4

听起来好像你需要：

1. 在开始时遍历所有输入/文本区域并获取默认值，然后将其粘贴到以元素 id 作为键的关联数组中
2. 在 checkValues 中，再次遍历输入并将预提交值与您的数组进行比较 - 找到匹配项时，您可以将值设置为“”。