JQuery Select Validation的问题

时间:2013-06-19 00:38:24

标签: jquery

你好,我对JQuery&我无法使用不包含选择框的联系表单教程使验证正常工作。

这是JQuery代码:

$(".txtbar, .txtbox").live("focus", function () {
    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');
    var pxlchange = '-145px';

    if (currid == "contactnumber") {
        pxlchange = '-145px';
    }
    if (currid == "message") {
        pxlchange = '-145px';
    }

    rowbox.addClass('colors');


    thelabel.animate({
        left: pxlchange
    }, 350, 'linear', function () {
        // animation complete
    });

    infobox.animate({
        opacity: 1.0
    }, 350, 'linear', function () {
        // animation complete
    });


    $(this).live("keyup", function () {
        var theval = $(this).val();
        var value = $("subject").val();
        var limitval = 3;
        var replacehtml = "";
        var nameinfohtml = "Not a valid Name!";
        var emailinfohtml = "Not a valid E-mail address!";
        var contactnumberinfohtml = "This field is optional!";
        var subjectinfohtml = "Not a valid subject!";
        var messageinfohtml = "Please fill this field out!";


        if (currid == "name") {
            replacehtml = nameinfohtml;
        } else if (currid == "email") {
            replacehtml = emailinfohtml;
        } else if (currid == "contactnumber") {
            replacehtml = contactnumberinfohtml;
            limitval = 9;
        } else if (value == '0') {
            replacehtml = subjectinfohtml;

        } else if (currid == "message") {
            replacehtml = messageinfohtml;
            limitval = 10;
        }



        // checking against e-mail regex
        if (currid == "email") {
            if (checkValidEmailAddress(theval)) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (!checkValidEmailAddress(theval)) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }
        } else {
            // we use this logic to check for name+message fields
            if (theval.length >= limitval) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (theval.length < limitval) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }                
       // we use this logic to check the subject
            if (value.val() !== '0') {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (value.val() == '0') {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }
        }


        // now we check if we can display the send button
        // much easier to just look for 'good class on the req fields
        if ($('#name').next().hasClass('good') && $('#email').next().hasClass('good') && $('#message').next().hasClass('good')) {
            // if all 3 boxes are good then we display our send button!
            // jquery validation complete
            $('#sendbtn').animate({
                opacity: 1.0
            }, 200, 'linear', function () {
                // display submitbtn animation complete
            });
        }
    });
});

$(".txtbar, .txtbox").live("blur", function () {
    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');

    rowbox.removeClass('colors');

    infobox.animate({
        opacity: 0
    }, 400, 'linear', function () {
        // animation complete
    });
});

Here is my JSfiddle attempt at making it work.

基本上我只是试图让它找到值“0”并添加一个“好”类,所以当你选择一个主题时它会读取接受消息,我已经阅读了很多方法如何做到这一点但是我不太确定如何将此脚本合并。

感谢您的时间,非常感谢所有的帮助。

2 个答案:

答案 0 :(得分:1)

$("subject").val();应为$("#subject").val();

您必须添加#以在jquery

中选择id

编辑:

并且您已经分配了var value = $("#subject").val();,但是稍后将其称为if (value.val() !== '0'),这将导致未定义。你应该致电if (value !== '0') {

答案 1 :(得分:0)

两个问题:

  • var value = $("subject").val();应该是:var value = $("#subject").val();
  • $(this).live("keyup", function () {应该是:$(this).live("keyup change", function () {

这应该解决你的问题,它对我有用。

以下是我修改的jsFiddle:http://jsfiddle.net/MpTbT/