验证输入和下拉列表

时间:2014-11-21 08:38:40

标签: jquery

需要一些帮助来验证输入和下拉列表。 两者都可以是空的,或者两者都必须填满。 如果用户忘记填写第5列中的文本输入,并从第6列的下拉列表中选择一个值,则应显示警告消息 或者如果用户忘记从第6列的下拉列表中进行选择并填写第5列中的文本框,则还必须出现警报消息。 验证必须对每个创建的行进行操作。

检查jsfiddle here
我在想这样的事情:

  $('input[name=QtePack]').each(function (obj) {
        var $QtePack = $(this).val();
        var tr = obj.closest('tr');
        var $PackType = tr.find("[id^='Pack_Type_']").val();
        if ($QtePack.length > 0 && $PackType == '') {
            valid = false;
            $PackType.addClass('error');
        }
    });

enter image description here

谢谢: - )

2 个答案:

答案 0 :(得分:1)

请参阅此演示http://jsfiddle.net/BE5Lr/4093/

  $('#SendButton').click(function (e) {
        // Validate if empty
        var valid = true;
        $('.required').each(function () {
            var $this = $(this);
            if ($.trim($(this).val()) == '') {
                valid = false;
                $(this).addClass('error');
            } else {
                $(this).removeClass('error');
            }
        });

// changes starts

        $("input[name='QtePack']").each(function(){
            var ip = $(this);
            var sel =      $(this).closest("tr").find("select[name='PackType']");


            if((ip.val().length==0 && sel.val().length!=0) || (ip.val().length!=0 && sel.val().length==0))
            {
                     alert('enter both type and quant or leave both blank');
                     ip.addClass('error');
                sel.addClass('error');
            }
        });

  // changes ends  
        // Show validation alert
        if (valid == false) {
            e.preventDefault();
            alert('Some field(s) is required.');

            return false;
        }

    });

答案 1 :(得分:0)

按如下方式更新您的代码:

$('input[name=QtePack]').each(function (obj) {


    var $QtePack = $(this).val();
    alert("QtePack = "+$QtePack);
    var tr = $(this).closest('tr');

    var reqelement=tr.find("[id^='Pack_Type_']");
    var $PackType = tr.find("[id^='Pack_Type_']").val();

    alert("PackType = "+$PackType);
    if ($QtePack.length > 0 && $PackType == '') {
        valid = false;
        $(reqelement).addClass('error');
    }

    if($QtePack.length == "" && $PackType != '')
    {
        valid = false;
        $(reqelement).removeClass('error');
        $(this).addClass('error');
    }
    if($QtePack.length == "" && $PackType == '')
    {
        valid = true;
        $(this).removeClass('error');
        $(reqelement).removeClass('error');
    }
});