jQuery validator of radio input groups is not validating in Bootstrap

Question

I'm working on a project which needs a single choice radio button validation using the jQuery validator plugin. I made an example that works perfectly and I implemented it into the code in the actual project, and now it just flat out refuses to work even though the example works perfectly. Kind of infuriating. This code is the same in the example aside from bootstrap elements.

JSFiddle here: http://jsfiddle.net/3vwWL/

<form action="" id="contact-form" class="form-horizontal">
   <form action="" id="registration-form">
      <div class="col-md-6">
         <div class = "form-group">
            <label class = "control-label">Must choose one</label>
            <br />
            <input name="radio" type="radio" data-validation="required" value="1" />A
            <input name="radio" type="radio" value="1" />B 
            <input name="radio" type="radio" value="1" >C 
            <input name="radio" type="radio" value="1" />D
         </div>
      </div>
   </form>
</form>

The JS:

$.validate({
    form: "#contact-form, registration-form",
    modules: 'location, date, security, file',
    onModulesLoaded: function () {
        $('#country').suggestCountry();
    },
    onError: function () {
        alert("You've missed something");
    },
    onSuccess: function () {
        alert("All clear!");
        return false;
    }
});

$('input')
    .on('beforeValidation', function () {
    console.log('About to validate input "' + this.name + '"');
}).on('validation', function (evt, isValid) {
    var validationResult = '';
    if (isValid === null) {
        validationResult = 'not validated';
    } else if (isValid) {
        validationResult = 'VALID';
    } else {
        validationResult = 'INVALID';
    }
    console.log('Input ' + this.name + ' is ' + validationResult);
});

// Restrict presentation length
$('#presentation').restrictLength($('#pres-max-length'));

All other form validations work, just not this one.

Rohan Kumar · Accepted Answer · 2014-04-02 11:51:53Z

1

You html is wrong you should use a single form, form inside other form will not work,

Try this,

<form action="" id="contact-form" class="form-horizontal">
    <div class="col-md-6">
      <div class = "form-group">
         <label class = "control-label">Must choose one</label>
         <br />
         <input name="radio" type="radio" data-validation="required" value="1" />A        
         <input name="radio" type="radio" value="1" />B  
         <input name="radio" type="radio" value="1" />C
         <input name="radio" type="radio" value="1" />D
      </div>
    </div>
</form>

Now validate only #contact-form.

answered Apr 2, 2014 at 11:51

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

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

1 Comment

Jake Gabb Over a year ago

Removing the extra form and validating only #contact-form hasn't done anything unfortunately :'(

Collectives™ on Stack Overflow

jQuery validator of radio input groups is not validating in Bootstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related