CODEWITHSUNDEEP
jquerytwitter-bootstrapvalidationradio-button
Jake Gabb
Jake Gabb

Reputation: 385

jQuery validator of radio input groups is not validating in Bootstrap

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.

Upvotes: 2

Views: 3222

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

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.

Upvotes: 1

Related Questions