How to validate a javascript validation with radio and checkbox button?

Question

On a webshop, I need to check if the user has checked this payment choice, and if he checked the CGU rules.

So this my html :

    <div id="choixPaiement">
      <div class="choixDuReglement">
        <ul>
            <li><input type="radio" name="buttonModePaiement" value="tata"></li>
            <li><input type="radio" name="buttonModePaiement" value="toto"></li>
            <li><input type="radio" name="buttonModePaiement" value="titi"></li>
            <li><input type="radio" name="buttonModePaiement" value="tutu"></li>
        </ul>
      </div>
      <div id="accepte_cgv">
        <p> <input type="checkbox" name="check_cgv" id="check_cgv"><label>Lu et approuvé</label></p>
        <p><a onclick="validCommande();" class="btnValidCommande" href="javascript:;"><span>Valid my order</span></a></p>
      </div>
    </div>

And this is my javascript :

function validCommande(){
  var paiement = $("input[@name=buttonModePaiement]:checked").val();
  alert(paiement);
  if(paiement == "undefined"){
    alert('please choose payment method');    
  }
  alert($('#check_cgv').is(':checked'));

}

when radiobutton and checkbox are not checked, I get two alert message : "undefined" and "false" (so that is correct).

But when I'm checking the checkbox, and no radiobutton, I get it : "on" and "true".

Why ?

To check for undefined, you should use typeof variable === 'undefined'. — JesseBuesking
– JesseBuesking, Commented Dec 14, 2011 at 16:09

Adam Rackis · Accepted Answer · 2011-12-14 16:17:32Z

1

I think this is what you want

function validCommande() {
    var paiement = $("input[name='buttonModePaiement']:checked");

    if(paiement.length === 0)
      alert('please choose payment method');    
    else
      alert(paiement.val());

    alert($('#check_cgv').is(':checked'));
}

Also, you're not closing your input tags:

<input type="radio" name="buttonModePaiement" value="tata" />

edited Dec 14, 2011 at 16:17

answered Dec 14, 2011 at 16:03

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

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

3 Comments

Alexander Over a year ago

@Adam Rackis, You missed a closing curly bracket.

Adam Rackis Over a year ago

@ptriek - fair enough. Visual studio complained to me when I actually tested the code, but then again visual studio complains every time I add a data-foo attribute.....*sigh*

Makotosan Over a year ago

+1 Checking the length is the proper way to do it since jQuery returns an array of matching elements, where in this case, if no items are checked, then you'll have an empty array.

Terry · Accepted Answer · 2011-12-14 16:17:48Z

Here is what I would do to your code and why:

<div id="choixPaiement">
      <div class="choixDuReglement">
        <ul>
            <li><input type="radio" class="buttonModePaiement" value="tata"></li>
            <li><input type="radio" class="buttonModePaiement" value="toto"></li>
            <li><input type="radio" class="buttonModePaiement" value="titi"></li>
            <li><input type="radio" class="buttonModePaiement" value="tutu"></li>
        </ul>
      </div>
      <div id="accepte_cgv">
        <p> <input type="checkbox" name="check_cgv" id="check_cgv"><label>Lu et approuvé</label></p>
        <p><a id="btnValidCommande" href="#"><span>Valid my order</span></a></p>
      </div>
</div>

$(document).ready(function(){
    $('#btnValidCommande').click(function(e){
        e.preventDefault();  // stop the link from trying to navigate
        validCommande();
    });
});

function validCommande() {
    var paiement = $(".buttonModePaiement:checked").val();

    if (!paiement) {
        alert('please choose payment method');
    }
    alert($('#check_cgv').is(':checked'));
}

Use classes when repeating identifiers, not names. Names are supposed to be unique for things like form submission. name="buttonModePaiement" should be class="buttonModePaiement".
Append your events in JS code, not inline. Notice I removed the onclick="validCommande();" from your link and append it in the DOM ready event.
You don't need to (nor should you) compare against "undefined". This will suffice (paiement == "undefined") ---> (!paiement)

Working fiddle: http://jsfiddle.net/hMdKT/3/

thanks for these information, it's really "proper" that my JS

ASHU · Accepted Answer · 2013-06-06 12:58:18Z

0

if u want to validate the radio button the do this way

<form name="as" method="post" action="n.php">
<input type="radio" id="x1"   name="red">
<input type="radio"  id="x2"   name="red">
<input type="radio"   id="x3"  name="red">
<input type="radio"   id="x4"  name="red">

<input type="submit" value="button" onclick="return xyz()">
</form>

    function xyz()
{
    var x = document.getElementsByName("red");
    for (var i=0; i<x.length; i++)
    {
        if (x[i].checked) {
            return true;
        }
    }
    // No radio button checked, return false.
    alert("hello");
    return false;
}

answered Jun 6, 2013 at 12:58

ASHU

947 bronze badges

Collectives™ on Stack Overflow

How to validate a javascript validation with radio and checkbox button?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related