使用ajax提交表单，表单自带过滤失效

做了一个表单，在HTML里边做了一些过滤，然后用$.ajax提交
问题是，点击submit按钮以后就直接调用ajax了，表单自带的过滤都失效了

<div>
      <label for="name">姓名</label>
      <input type="text" id="name" name="name" autofocus="true" required="true"/>
      <select id="gender" name="gender">
        <option value="男">先生</option>
        <option value="女">女士</option>
      </select>
    </div>
    <div>
      <label for="tel">手机号码</label>
      <input id="tel" name="tel" type="text" placeholder="请输入您的手机号码" pattern="\d{11}" required="true"/>//这里限制11位数字
    </div>
    <div>
      <label for="amount">借款金额</label>
      <input id="amount" name="amount" type="number" placeholder="请输入金额" pattern="\d{2,10}" required="true"/>//这里限制2-10位数字
      <label for="period">借款期限</label>
      <input type="text" name="period" id="period" placeholder="请输入天数" pattern="\d{1,3}" required="true"/>
    </div>
    <div>
      <label for="province">所在地区</label>
      <select name="province" id="province">
      </select>
      <label for="city">城市</label>
      <select name="city" id="city">
      </select>
    </div>

  $('input[type=submit').on('click',function(){
    $.ajax({
      type:"GET",
      url:'newinvest/invest'+'?'+$('form').serialize(),
      success:formCallback()
    });
  });

这种情况应该怎么解决呢？

---

“表单自带的过滤”是？这个我不清楚，所以没法谈感受！不过代码可以这样组织：

$('input[type=submit').on('click',function(e){
    //检查各个数据是否正确，可以调用你说的“自带的过滤”方法检查输入是否合法
    if(数据不正确){
        return false;
    }
    //如果检查正确，再继续发送ajax
    $.ajax({
      type:"GET",
      url:'newinvest/invest'+'?'+$('form').serialize(),
      success:formCallback()
    });
});

修正：

那你应该拦截的是表单的submit事件，调整html:

<form id="ffff">
      <label for="name">姓名</label>
      <input type="text" id="name" name="name" autofocus="true" required="true"/>
      <select id="gender" name="gender">
        <option value="男">先生</option>
        <option value="女">女士</option>
      </select>
    </div>
    <div>
      <label for="tel">手机号码</label>
      <input id="tel" name="tel" type="text" placeholder="请输入您的手机号码" pattern="\d{11}" required="true"/>//这里限制11位数字
    </div>
    <div>
      <label for="amount">借款金额</label>
      <input id="amount" name="amount" type="number" placeholder="请输入金额" pattern="\d{2,10}" required="true"/>//这里限制2-10位数字
      <label for="period">借款期限</label>
      <input type="text" name="period" id="period" placeholder="请输入天数" pattern="\d{1,3}" required="true"/>
    </div>
    <div>
      <label for="province">所在地区</label>
      <select name="province" id="province">
      </select>
      <label for="city">城市</label>
      <select name="city" id="city">
      </select>
</form>

$('#ffff').on('submit',function(){
    $.ajax({
      type:"GET",
      url:'newinvest/invest'+'?'+$('form').serialize(),
      success:formCallback()
    });
  });

---

 $('form').on('submit',function(){
    $.ajax({
      type:"GET",
      url:'newinvest/invest'+'?'+$('form').serialize(),
      success:formCallback()
    });
  });