2017-08-10 19 views
-1

我正在驗證規則,我想使用純javascript。我還想使用JQuery驗證程序。所以這是我的問題。我輸入表單的不同字段,並且我想在客戶端鍵入(動態)時檢測失效。我找到了一個解決方案,但這不是必需的結果。所以我不想用提醒函數。這裏是我的代碼:使用基準控制來控制不使用警報的規則(純javascript)

$('#name').keyup(function(key) 
    { 
    if (this.value.length >= 2 || this.value == '') 
    { 
     alert('my message'); // This works but it not what I want to do. 
     // I want to have a message after my field with the error message. 

     $('#name').after('<span class="error"> my message</span>'); 
     //This is what I try also but it repeat the message many times. 

     document.getElementById("name").innerHTML = "my message";  
     // I tried this but I didn't see anything in my browser.   
    } 
}); 

所以,我想在這個函數來做例子是打印一條消息,告訴我該字段爲空和消失,一旦它不是。 有何建議?

+3

' $('#name')'不是一個純粹的JavaScript –

+0

可能你需要指定更多一點爲什麼當你不想做這件事的時候混合普通的js和jQuery ... – Felix

+0

我是對不起,我應該確切的說我沒有使用JQuery驗證程序 – bsm

回答

1

既然你說你想 JavaScript中,你可以試試這個:

<html> 
    <body onload=myFunction2()> 
     <input type="text" id="myinput" onkeyup="myFunction()" /> 
     <span id="myspan" style="color:red;" ></span> 

     <script> 

      var myspan = document.getElementById("myspan"); 


      function myFunction(){ 

       var l = document.getElementById('myinput').value; 
       if (l.trim().length >= 2 || l.trim() == '') 
        { 
         myspan.innerHTML = "My error message"; 
        } 
       else{ 
        myspan.innerHTML = ''; 
       } 
      } 

      function myFunction2(){ 

       var l = document.getElementById('myinput').value; 
       if(l.trim() == ''){ 
        myspan.innerHTML = "Do not let this field empty."; 
       } 

      } 
      </script> 
    </body> 
</html> 
+0

工作是這個看起來好很好,但他需要引導jQuery的...所以他已經進口...所以我不明白爲什麼不使用jquery – Felix

+0

謝謝,但如果我的長度等於1爲例消息誤差不dissapear。 – bsm

+0

@ysd嘗試新的代碼...請注意,我已經改變了腳本 –

1

這裏是一個完全工作的例子:

https://jsfiddle.net/hruby718/1/

你需要一個

$(document).ready(function() { 

各地

$(document).ready(function() { 
    $('#name').keyup(function(key){ 
     if (this.value.length >= 2 || this.value == ''){ 
      alert('my message'); // This works but it not what I want to do. 
      // I want to have a message after my field with the error message. 

      $('#name').after('<span class="error"> my message</span>'); 
      //This is what I try also but it repeat the message many times. 

      document.getElementById("name").innerHTML = "my message";  
      // I tried this but I didn't see anything in my browser.   
     } 
    }); 
}); 

和是像伊萬Sivak提到

$('#name').keyup(function(key){ 

是不是純JS

爲什麼你不能使用jQuery

+0

我無法使用它,因爲它們強加於我。我嘗試了你提出的建議,但不起作用。 – bsm

+0

查看我在上面發佈的jsfiddle它的工作原理。你可以看看瀏覽器控制檯是否有錯誤? – Felix

+0

您是否導入了jQuery? – Felix

-1
$(document).ready(function(){ 
     $('#name').keyup(function(){ 
      //i use jquery get input's value 
      if($('#name').val().length >=2 || $('#name').val() == ''){ 
       //alert('message'); 
       console.log('function go into'); 
       $('#name').after('<span class="error"> my message </span>'); 
       //document.getElementById('name').innerHTML = 'my message'; 
       //change input's value ,should use val() or value; 
       //$('#name').val('myMessage'); 
       document.getElementById('name').value = 'my message'; 
      } 
     }) 
    }) 
+0

你應該提供一個真實的答案,而不僅僅是簡單的代碼。你做了什麼來解決這個問題?爲什麼? – hering