如何獲取輸入字段以驗證onkeyup？

Question

我有一個使用ajax進行驗證的表單。提交按鈕時，如果輸入字段無效，則突出顯示輸入字段，並出現警告框。如果表單再次提交併且輸入字段中的數據有效，則輸入框不會突出顯示。

現在，我似乎無法得到輸入字段來驗證的onkeyup，切過去等

我想if語句來驗證上的onkeyup和輸入字段中的<p>標籤驗證的onkeyup 。現在，我只能在點擊提交按鈕時纔會發生這種情況。

我錯過了什麼？

http://jsfiddle.net/b6eudmuf/4/

 $(document).ready(function() { 
$('form #response2').hide(); 


$('.button2').click(function(e) { 
$('input[type="text"]').on("keyup bind cut copy paste", function(){ 
}); 

e.preventDefault(); 

var valid = ''; 
var required = ' is required'; 
var first = $('form #first').val(); 
var last = $('form #last').val(); 
var email = $('form #email').val(); 
var tempt = $('form #tempt').val(); 
var tempt2 = $('form #tempt2').val(); 


if(first=='' || first.length<=1) { 
if (/^\s*$/.test(first.value)); 
    $('form #first').css('border','2px solid #ff0000'); 
    $('form #first').css('background-color','#ffcece'); 
    valid += '<p>Your first name is required</p>'; 
} 
else { 
    $('form #first').css('border','1px solid #ffd09d'); 
    $('form #first').css('background-color','#ffffff'); 
} 

if(last=='' || last.length<=1) { 
    $('form #last').css('border','2px solid #ff0000'); 
    $('form #last').css('background-color','#ffcece'); 
    valid += '<p>Your last name' + required + '</p>'; 
} 
else { 
    $('form #last').css('border','1px solid #ffd09d'); 
    $('form #last').css('background-color','#ffffff'); 
} 

if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) { 
    valid += '<p>Your e-mail address' + required + '</p>'; 
} 

if (tempt != 'http://') { 
    valid += '<p>We can\'t allow spam bots.</p>'; 
} 

if (tempt2 != '') { 
    valid += '<p>A human user' + required + '</p>'; 
} 

if (valid != '') { 
    $('form #response2').removeClass().addClass('error2') 
     .html('' +valid).fadeIn('fast'); 
} 

else { 
    $('form #response2').removeClass().addClass('processing2').html('<p style="top:0px; left:0px; text-align:center; line-height:1.5em;">Please wait while we process your information...</p>').fadeIn('fast'); 

    var formData = $('form').serialize(); 
    submitFormSubscribe(formData); 
} 

}); 

}); 

function submitFormSubscribe(formData) { 

$.ajax({ 

type: 'POST', 
url: 'http://3elementsreview.com/blog/wp-content/themes/3elements/php-signup/sign-up-complete.php', 
data: formData, 
dataType: 'json', 
cache: false, 
timeout: 4000, 
success: function(data) { 

$('form #response2').removeClass().addClass((data.error === true) ? 'error2' : 'success2') 
      .html(data.msg).fadeIn('fast'); 

if ($('form #response2').hasClass('success2')) { 
setTimeout("$('form #response2').fadeOut('fast')", 6000); 
} 

}, 
error: function(XMLHttpRequest, textStatus, errorThrown) { 

$('form #response2').removeClass().addClass('error2') 
.html('<p>There was an <strong>' + errorThrown + 
'</strong> error due to an <strong>' + textStatus + 
'</strong> condition.</p>').fadeIn('fast'); 
}, 
complete: function(XMLHttpRequest, status) {      
$('form')[0].reset(); 
} 
}); 
}; 

Answer 1

看起來你是綁定元素的點擊事件中的空keyup事件處理程序鏈接纔可用 '按鈕2' CSS類：

$('.button2').click(function (e) { 
     $('input[type="text"]').on("keyup bind cut copy paste", function() {}); 

你想要的是：

$("document").ready(function(){ 
    $('input[type="text"]').on("keyup bind cut copy paste", function() { 
     //Put your validation logic here - this is the code that will fire on each keyup 
    }); 
});