CODEWITHSUNDEEP
jqueryhtmlformstwitter-bootstrapvalidation
PMills
PMills

Reputation: 181

Creating Form Validations in Bootstrap (without a plugin)

I don't necessarily need an entire jQuery plugin to handle the kind of validations I'm looking for here. Namely, I just want to keep one form input disabled until integers have been entered into two others, which will then unlock it. This is the if-loop I'm using to achieve this.

if ($("#q") && $("#target") === ''){
  $('#read_return_response_rate_ids').attr('disabled', 'disabled')
} else {
  $('#read_return_response_rate_ids').attr('disabled', '')
}

Bootstrap has this nifty markup selector called "disabled" where if you set it to "disabled", it'll actually disable the form input. I'm not sure if setting the disabled form field to an empty string will invert this, so that's also part of the problem here. I can't find anything pointing to the opposite of the disabled method on Google, so I'm unsure about whether there is an inverse to the "disabled" attribute.

Honestly, I feel like I'm missing something insignificant, and will be nuclear facepalming once the answer is revealed to me. Thanks in advance to those who do help.

Upvotes: 0

Views: 90

Answers (2)

classicalConditioning
classicalConditioning

Reputation: 655

I use this:

$('#read_return_response_rate_ids').removeAttr('disabled');

and your code will look like (update for regex /^\d+$/.test(val) to test if only numbers are entered):

function enableOrDisableField()
{
    if (/^\d+$/.test($("#q").val()) && /^\d+$/.test($("#target").val))
    {
         $('#read_return_response_rate_ids').attr('disabled','disabled');
    }
    else
    {
         $('#read_return_response_rate_ids').removeAttr('disabled');
    }
}

$("#q").on("change",function(){
enableOrDisableField();
});
$("#target").on("change", function(){
enableOrDisableField();
});

Upvotes: 1

Ahs N
Ahs N

Reputation: 8366

This is what I came up with:

$(document).keyup(function () {
    if ((isNaN($('#num1').val()) == false && $('#num1').val().length > 0) && (isNaN($('#num2').val()) == false && $('#num2').val().length > 0)) {
        $('#num3').removeAttr('disabled');
    } else {
        $('#num3').attr('disabled','disabled');
    }
});

Here is the JSFiddle demo

The 3rd textbox enables only when the first two textboxes contain numbers.

And just pointing out, the disabled attribute is an HTML5 attribute and not a Bootstrap specific attribute :)

Upvotes: 1

Related Questions