Validate an input and dropdown

Question

Need some help to validate an input and dropdown. Both can be empty or both must be filled. If the user forgets to fill the text input in column 5 and select a value from the dropdown in column 6 alert message should appear or if the user forgets to choose from the dropdown in column 6 and fill in the text box in column 5 alert message must also appear. The validation must operate on each created row.

Check jsfiddle here.
I'm thinking something like this:

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

Thanks :-)

Dev · Accepted Answer · 2014-11-21 09:20:13Z

1

see this demo 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;
        }

    });

answered Nov 21, 2014 at 9:20

Dev

6,7962 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3426204 Over a year ago

Thank Dev. I have fixed a small modification. valid = false; instead of alert() and added else{ip.removeClass('error'); sel.removeClass('error');}

Atul Nar · Accepted Answer · 2014-11-21 09:09:22Z

update your code as follows :

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

Collectives™ on Stack Overflow

Validate an input and dropdown

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related