Question

我有一个使用ajax验证的表单。提交按钮时，输入字段会突出显示它们是否无效，并出现一个警告框。如果再次提交表单并且输入字段中的数据有效，则不会突出显示输入框。

现在，我似乎无法获得输入字段来验证onkeyup，切断过去等。

我希望if语句中的<p>标签在onkeyup上验证，并输入字段以验证onkeyup。现在，我只能在单击提交按钮时实现。

我错过了什么？

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

看起来你在使用'button 2'CSS类的元素的click事件中绑定一个空的keyup事件处理程序：

$('.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
    });
});

如何获取输入字段以验证onkeyup？

1 个答案: