setCustomValidity()html5函数不能正常工作?

时间:2017-09-04 06:44:38

标签: javascript jquery html5

我正在使用setCustomValidity()为手机号码验证添加自定义错误消息。无法正常工作。如果输入任何无效的数字或字符,它显示我指定的错误消息,但在输入有效信息后,它不清除错误消息并停止我的ajax调用。  这是我的HTML

<div class="col-md-6">
    <input type="tel" name="tel" pattern="[0-9]{10}" class="form-control input-lg" id="tel"  placeholder="Mobile" >
    </div>

这是脚本

$(document).ready(function(){

        //mobile number validation

        var input = document.getElementById('tel');
    input.oninvalid = function(event) {

        event.target.setCustomValidity('mobile number must contain 10 digits , alphabets & specila characters are not allowd');
    }
        //ajax call to send mail
         $("#btn").click(function(){ 

                $.ajax({      
                    url:"SendEmail",
                    data:"&FirstName="+ $("#FirstName").val()+"&LastName="+ $("#LastName").val()+"&email="+ $("#email").val()+"&tel="+ $("#tel").val()+"&text="+ $("#text").val(),
                    dataType:"json",  
                    type:"get",  
                    success:function(response){    
                        console.log(response); 

                                                }


             });
            });
    });

它有什么不对吗?

1 个答案:

答案 0 :(得分:0)

试试这个:

<div class="col-md-6">
 <input type="tel" name="tel" pattern="[0-9]{10}" class="form-control input-lg"
  id="tel" placeholder="Mobile" oninvalid="setCustomValidity('mobile number must 
  contain 10 digits ...')" oninput="setCustomValidity('')"/>
</div>