使用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()
    });
  });

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