用于表单验证的jquery keyup函数

时间:2015-06-06 17:09:35

标签: jquery html

我试图弄清楚如何将keyup函数嵌入到我目前拥有的代码中。代码工作正常但是我必须在输入字段之外单击才能执行它。

我相信keyup函数会消除这种行为并使其更加生动。但我是jquery和java脚本的初学者,所以非常感谢你的帮助...

$(document).ready(function (){
validate();
$('#FirstName, #LastName, #PhoneNumber, #Email, #Age, #Profession, #ChooseYourCoursePreferableMonth, #AreYouBringingYourLaptop, #hear, #PreferableContactMethod').change(validate);
});

function validate(){
if (
    $('#FirstName').val().length   >   2   &&
    $('#LastName').val().length  >   2   &&
    $('#PhoneNumber').val().length    >   7   &&
    $('#Email').val().length    >   0   &&
    $('#Age').val().length    >   0   &&
    $('#Profession').val().length    >   0   &&
    $('#ChooseYourCoursePreferableMonth').val().length    >   0   &&
    $("input[name='AreYouBringingYourLaptop']:checked").val().length    >   0   &&
    $('#hear').val().length    >   0   &&
    $("input[name='PreferableContactMethod']:checked").val().length    >   0
    )

{   // FILLED
    $("input[type=submit]").prop("disabled", false);
    $('input[type=submit]').val('Submit Form');
    $('input[type=submit]').css('color', '#383838');
    $('input[type=submit]').css('background-color', '#63bc46');
    $('input[type=submit]').css('font-size','18px');
    $('input[type=submit]').css('cursor','pointer');

}else {
    // NOT FILLED
    $("input[type=submit]").prop("disabled", true);
    $('input[type=submit]').val('Fill in all required fields to Submit Form');
    $('input[type=submit]').css('color', '#a0a0a0');
    $('input[type=submit]').css('background-color', '#f3f3f3');
    $('input[type=submit]').css('font-size','15px');
    $('input[type=submit]').css('cursor','auto');
}

}

3 个答案:

答案 0 :(得分:0)

您可以使用.keyup()。我将发布一个例子。

$( "input[type=submit]" ).keyup(function() {
   validate();
});

jQuery网站上的示例:https://api.jquery.com/keyup/

答案 1 :(得分:0)

使用.on("输入")

每次按某个输入内的按键

时,都会调用该功能

像这样:

$("#yourinput").on("input", function(){
    //validation
});

或者这个,调用validate()函数

$("#yourinput").on("input", validate);

答案 2 :(得分:0)

试试此代码

$('#FirstName, #LastName, #PhoneNumber, #Email, #Age, #Profession,  #ChooseYourCoursePreferableMonth, #AreYouBringingYourLaptop, #hear, #PreferableContactMethod').keyup(function() {
   validate();
 });

希望这会对你有所帮助。