Question

我使用Expression engine的插件自由格式创建了一个提交表单，一切都在提交方面有效，我唯一的问题是评估方面。

有没有办法在提交前验证我的脚本，即选择未填充的字段，不正确的电子邮件等。

下面的

是我的代码片段。

JQUERY

class User extends Eloquent {
    /** ...
    */

    public function usergroup(){
        return $this->belongsTo('App\UserGroup');
    }
}

HTML

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

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

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

// Submit the form using AJAX.
$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData
})
.done(function(response) {

    if (response.success) {
        formMessages.removeClass('error').addClass('success').text("Thank you for submitting your details");
          $('.valFields').val("");
     } else {
      formMessages.removeClass("success").addClass("error").text("Oops, Please check your details");
   }

})


.fail(function(data) {
    // Make sure that the formMessages div has the 'error' class.
    $(formMessages).removeClass('success');
    $(formMessages).addClass('error');

    // Set the message text.
    if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
    } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
    }
});

 })

});

Answer 1

字段验证可以调用函数

调用验证函数onSubmit action，如果成功使用AJAX 执行表单提交。

Example:

<script>
  $(form).submit(function(e) {

  e.preventDefault();
  var check = validate();
  if(check){
   var formData = $(form).serialize();
   ..
   //form sumit using AJAX
   ..
 }

 function validate()
      {
         if( document.myForm.Name.value == "" )
         {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }

         if( document.myForm.EMail.value == "" ) 
         {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         return true;
     }
</script>

Answer 2

更好的方法是将类型放入输入

<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:required="required"
              }

            </li>

            <li>
              <label for="email">Email</label>
              {freeform:field:email
                  attr:class="form-control valFields" 
                  attr:placeholder="Email" 
                  attr:required="required",
                  attr:type="email"
              }
             </li>
          </ul>

它不仅会确保字段不会留空，还会检查有效的电子邮件类型。

为提交表单创建验证脚本

2 个答案: