Question

我使用表达式引擎的自由形式插件和jquery的验证插件Click here创建了一个简单的验证函数默认情况下，Freeform会自动检测您是否使用AJAX进行表单提交。

以下是我的代码演示......

{exp:freeform:form 
            form_id="1"
            admin_notify="myemail@me.com"
            form:class="main-contact submit-fade ajax-form"
            form:id="ajax-contact"


        }   

          <h2 class="business">Register</h2>

            <ul class="small-block-grid-2 medium-block-grid-2 hide-form">
               <li>
                  <label for="name">Name</label>
                  {freeform:field:first_name
                      attr:class="form-control valFields" 
                      attr:placeholder="First Name" 
                      attr:class="required"
                  }

                </li>

                <li>
                  <label for="email">Last Name</label>
                  {freeform:field:last_name
                      attr:class="form-control valFields" 
                      attr:placeholder="Last Name" 
                      attr:class="required"
                  }
                 </li>
                 <li>
                  <label for="email">Email</label>
                  {freeform:field:email
                      attr:class="form-control valFields" 
                      attr:placeholder="Email" 
                      attr:class="required"
                  }
                 </li>
                 <li>
                  <label for="email">Telephone</label>
                  {freeform:field:telephone
                      attr:class="form-control valFields" 
                      attr:placeholder="Telephone" 
                      attr:class="required"
                  }
                 </li>
              </ul>
              <input type="submit" class="btn btn-success">

        {/exp:freeform:form}

JS

验证功能

var form = $('#ajax-contact');
 var formMessages = $('#form-messages');


 $(form).submit(function(e) {
 form.validate();

 e.preventDefault();
 var formData = $(form).serialize();

  $.ajax({
   type: 'POST',
   url: $(form).attr('action'),
   data: formData
 })


$('#ajax-contact').validate({
rules: {
  name: {
    rangelength: [2, 40],
  },
  email: {
    rangelength: [2, 40],
    email: true,
    required: true
  },
  errorClass: "error",
  highlight: function (input) {
    $(input).closet('.required').removeClass('has-success').addClass('has-error');
  }
}

// After Validation 

if ($('formData').valid()) {

console.log('yes its working');

  }
});

首先form.validate()没有定义？此外，当我提交任何无法验证的内容时，我会看到错误消息this filed is required，不断累积的问题是我的提交表单淡出然后显示我为其设置的“成功”。除非所有字段都经过验证，否则不会发生这种情况

验证JQUERY表单字段功能不起作用

0 个答案: