使用JavaScript addevent監聽器在引導html窗體上輸入驗證

我在使用addeventlistener在我的javascript中驗證html文本框元素的值時遇到了困難。它不能通過以下方式正確驗證我的輸入：使用JavaScript addevent監聽器在引導html窗體上輸入驗證

1）即使在該文本框中有值時顯示「字段爲空」。 2）只有當我點擊提交時纔會生效。 < - （如何爲用戶點擊了文本框是我所進行驗證？）

以下是相關的HTML代碼（自舉類）：

 <div class ="col-lg-8"> 
     <div class="form-group"> 
      <label for="inputfirstName" class="col-sm-2 control-label">First Name</label> 
        <div class="col-sm-10"> 
        <input type="text" class="form-control" id="inputfirstName" 
         placeholder="Enter First Name" /> 
        </div> 
     </div>

以下是有關JavaScript代碼valdiate的名字文本框字段不爲空，如果是它應該返回一個自定義的驗證錯誤

window.addEventListener('load',init); 
function init() 
{ 
var firstname = document.getElementById("inputfirstName"); 
firstname.addEventListener('onmouseclick',validateFirstname(firstname)); 
} 

function validateFirstname(e){ 
var checker = e.value; 
    if (checker == ""){ 
    e.setCustomValidity("This field must not be blank !"); 

    } 
}

來源

2014-10-22 misctp asdas

我真的不知道，當你想驗證你的輸入。目前，您正在傾聽用戶點擊您的文本框並在此刻執行驗證。

但是，由於您只是在調用e.setCustomValidity時添加了驗證錯誤，因此只有在發佈表單後纔會顯示。這是通過setCustomValidity的設計。這在這裏有更詳細的解釋：How to force a html5 form validation without submitting it via jQuery

要在用戶輸入他的文本後驗證您的文本框，您可以使用輸入和更改事件。當用戶在文本框中鍵入內容時輸入火焰，在用戶離開文本框後更改。要觸發驗證而不管用戶是否關注該字段，還必須將輸入設置爲「必需」。然後爲了顯示您的消息而不是HTML5的標準必需消息，您還必須將無效事件添加到事件偵聽器。你可以在這裏找到一個更精確的答案，這裏用完整的代碼來說明如何完成這個：Set custom HTML5 required field validation message

<input type="text" class="form-control" id="inputfirstName" 
        placeholder="Enter First Name" required="required"/> 


window.addEventListener('load',init); 
function init() 
{ 
var firstname = document.getElementById("inputfirstName"); 
firstname.addEventListener('input',validateFirstname(firstname)); 
firstname.addEventListener('change',validateFirstname(firstname));+ 
} 

function validateFirstname(e){ 
    var checker = e.value; 
    if (checker == ""){ 
     e.setCustomValidity("This field must not be blank !"); 
    } 
    else{ 
     e.setCustomValidity(""); 
    } 
}

來源

2015-08-09 19:42:25

使用JavaScript addevent監聽器在引導html窗體上輸入驗證

回答

相關問題