CODEWITHSUNDEEP
jqueryformsvalidationtwitter-bootstrap-3radio-button
hawkhorrow
hawkhorrow

Reputation: 475

Bootstrap3 Form Validation for Button acting as Radio using jQuery

Background

I have a form which a user must click a radio button to select a security level while adding another user. Doing a little researching, it has become apparent that jQuery Validation is not compatible with with buttons acting as radio selects. Therefore, I have taken a look at someone elses solution, which 'on clicking' a button, sets a hidden value as the value of the button, and that hidden value is the one that validates the users input. Unfortunately,it is not working.

Can someone help me tweak the code that will allow this hidden input button to assume the value of the button clicked. Please keep in mind I have omitted a few regular input fields such as first name and last name in the html.

UPDATE:

It just so happens that this form is inside a modal window. I believe Bootstrap's modal-open handler is interfering with the actual jquery of .on. Can anyone provide a solution with the 'newly brought to light' information?

Buttons in Form

<div class="btn-group" data-toggle="buttons" id="addSecLvlButtons" >
    <label id="addSecLvl1Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">Security Lvl 1</label>
    <label id="addSecLvl2Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption2" value="2">Level 2</label>
    <label id="addSecLvl3Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption3" value="3">Level 3</label>
    <label id="addSecLvl4Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption4" value="4">Level 4</label>
    <label id="addSecLvl5Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption5" value="5">Level 5</label>
</div>
 <input required type="hidden" name="addSecLvl" id="addSecLvl">

jQuery

//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function() {
    $('#addSecLvl').val($(this).val());
});


//Validate the form and show hidden fields
$('#addUser').validate({
    debug: false,
    ignore: [],
    rules: {
        addFirstName: "required",
        addLastName: "required"
    },
    messages: {
        addFirstName: "Please enter the new user's first name",
        addLastName: "Please enter the new user's last name"
    }
});

POSSIBLE SOLUTION SUGGESTION

I have this code, which does seem to be working fine with bootstrap inside the modal window. Maybe a slight tweak would do the trick for .on as well? Just trying to 'think outside the box'

$("#addUserName").focus(function() {
    var firstname = $("#addFirstName").val();
    var lastname = $("#addLastName").val();
    if(firstname && lastname && !this.value) {
        this.value = firstname + "." + lastname;
    }
});

Upvotes: 3

Views: 466

Answers (1)

the911s
the911s

Reputation: 1924

Good news, you're pretty close. You're passing the label object into your click handler, rather than the input object (note that you're passing the object with class .btn, which is the label).

Try something like this:

HTML

<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">`

JavaScript

//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function() {
    $('#addSecLvl').val($(this).val());
});`

Here is a JSFiddle demonstrating the code. Good luck!

Upvotes: 1

Related Questions