Zurb Foundation Abide问题

时间:2015-03-23 19:43:55

标签: javascript jquery ajax forms zurb-foundation

无法使用Foundation 5 Abide代码提交表单。如果它取消验证,则代码/ ajax表单完美地提交。看下面的代码,我确定我错过了什么。该表单目前仅检查有效的电子邮件地址,但如果我可以让这一个验证首先工作,我将在以后添加检查名字和姓氏字段。

形式:

<form method="post" name="adduser" id="adduser" data-abide="ajax">
<fieldset>
<legend>Add New User</legend>    

<div class="small-2 columns">
<label class="inline">First Name
<input type="text" name="fname"/>
</label>
</div>

<div class="small-2 columns">
<label class="inline">Last Name
<input type="text" name="lname"/>
</label>
</div>

<div class="small-4 columns">
<label class="inline">Email
<input type="email" name="email"/>
</label>
</div>

<div class="small-2 columns">
<label class="inline">Access Type
<select  name="accesslvl">
<option value="1" selected>User</option>
<option value="2">Admin</option>
</select>
</label>
</div>

<div class="small-2 columns">
<input type="submit" class="button small adduserbtn" value="Add User" />
</div>
</fieldset>
</form>

脚本:

$('#adduser').on('valid.fndtn.abide', function() {

     $.ajax({
          type: 'post',
          url: 'addnewuser.php',
          data: $('form').serialize(),
          success: function () {
               alert('User has been added successfully');
               window.location.reload(true);
          }
      });
});

在将验证添加到等式中之前,我通过此脚本提交表单,该表单工作正常,当我从表单中删除数据存储设置时仍然可以正常工作。

 $('form').on('submit', function (a) {

      a.preventDefault();

      $.ajax({
        type: 'post',
        url: 'addnewuser.php',
        data: $('form').serialize(),
        success: function () {
          alert('User has been added successfully');
          window.location.reload(true);
        }
      });

    });

  });

0 个答案:

没有答案