setCustomValidity（）html5函數無法正常工作？

我正在使用setCustomValidity()爲手機號碼驗證添加自定義錯誤消息。它無法正常工作。如果輸入任何無效的數字或字符，它會顯示錯誤消息，但在輸入有效信息後，它不會清除錯誤消息並停止我的ajax調用。這裏是我的htmlsetCustomValidity（）html5函數無法正常工作？

<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); 

               } 


      }); 
      }); 
    });

什麼錯呢？

來源

2017-09-04 bharath

你不要在控制檯中的任何錯誤？如果驗證工作如預期可能與您的阿賈克斯調用 –

試試這個：

<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>

來源

2017-09-04 06:56:25 parndepu

nope它不起作用 – bharath

https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ 這可能有助於:) – parndepu

setCustomValidity（）html5函數無法正常工作？

回答

相關問題