jQuery: How I can validate simultaneously checkbox and input text?

Question

I have a div and into this I have 2 checkboxes and 2 inputs text but I want validate or check if all inputs are empty to display an alert or error and that fill at least one input (checkbox or text) because I don't do two validations: 1 for checkboxes and 2 for inputs text... exists any way to do this?

HTML

<div id="t_disp">
    <p>
        <label for="7x24">7x24</label>
        <input id="7x24" name="7x24" type="checkbox"/>
    </p>
    <p>
        <label for="5x8">5x8</label>
        <input id="5x8" name="5x8" type="checkbox"/>
    </p>
    <p>
        <label for="especial">Especial</label>
        <input id="especial" name="especial" type="text"/>
    </p>
    <p>
        <label for="ticket">Ticket</label>
        <input id="ticket" name="ticket" type="text"/>
    </p>
</div>

Thanks in advance!!

elclanrs · Accepted Answer · 2012-11-25 06:58:41Z

1

To get how many inputs are filled/checked:

var filled = $('#t_disp input').filter(function() { 
  return $(this).is('[type=checkbox]') ? this.checked : this.value;
}).length;

if ( filled ) {
   // at least one input is filled
} else {
   // all inputs are empty
}

answered Nov 25, 2012 at 6:58

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

Comments

diggersworld · Accepted Answer · 2012-11-25 06:56:48Z

0

For the text inputs you can check the value.

$('#especial').val();
$('#ticket').val();

For the check boxes you can check if they're checked.

$('#7x24').attr('checked'); // returns 'checked' if checked
$('#5x8').attr('checked');

Then you just need to stick them all in a condition. If they're all empty or not checked then you show your error.

P.S. In my experience id= beginning with numbers don't work all that well.

answered Nov 25, 2012 at 6:56

diggersworld

13.1k25 gold badges87 silver badges120 bronze badges

Comments

ronalchn · Accepted Answer · 2012-11-25 07:47:55Z

0

You can use below function

function validate()
{

    var isFormValid = false;

        $("#t_disp input:text").each(function()
        {
      if ($.trim($(this).val()).length > 0)
           {      isFormValid = true;    }
        });

     var len =  $("#t_disp input:checked").length;
     if( len > 0 ) { isFormValid = true; }

        if (!isFormValid) 
        alert("Please fill atleast on one field.");

}

edited Nov 25, 2012 at 7:47

ronalchn

12.4k10 gold badges53 silver badges61 bronze badges

answered Nov 25, 2012 at 7:28

Sudz

4,3082 gold badges20 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery: How I can validate simultaneously checkbox and input text?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related