JavaScript Radio button selection validates fields?

I need to use javascript so that when the one radio button is selected nothing happens but if the other one is (for example, other address) it will then validate the following fields;

street suberb postcode

Whilst I post this, it's probably a similar method, but when I have a checkbox and a textbox how could I make it so that the textbox must not be left empty only if the checkbox is checked...

Thanks everyone!!!! Ask for more details if needed, I'm terrible at explaining things!

Answers


/* To check radio validation in Employee Details page */

function editPage()
{
var select=document.frmEmployeeDetails.radSelect;
if (radioValidate(select,"Select an Employee"))
      {
window.open("EditEmployee`enter code here`.html","_self");
      }
return false;
}   

Hope this example helps you friend.


Since they will be checking the radio button when they click on it, you can add an onClick event to one of the radio buttons and not the other.

<input type='radio' id='test' name='test-1' />
<input type='radio' id='test' name='test-2'onClick='Validate();'/>

For the checkbox, when a user checks the box you should set the focus to the text input field. That way if a user moves away from that field (onBlur) you can give them an error/alert to fill in the text.

<input type='checkbox' id='testChkbx' name='testChkbx' onClick=' /*Set the focus to the text box*/'/>

<input type='text' id='testText' name='testText' onBlur='/* Check to make sure the value of the checkbox is not empty. */'/>

I'll assume you might be using jQuery, since you didn't say. If not, then you can still take the concepts and port them to plain old javascript or whatever you're using.

Example markup

<form id="address-form">
 <input type="radio" name="validate" id="validate_address" value="yes"> Validate<br>
 <input type="radio" name="validate" value="no"> Don't Validate<br>
 Street <input name="street"><br>
 Suberb <input name="suberb"><br>
 Postcode <input name="postcode"><br>
 <input type="submit">
</form>​​​​​

Conditional validation

Either somewhere on your page in a <script> tag or in a javascript file you include, create a submit event that will check the value of the radio input before doing the validation.

$('#address-form').submit(function(event) {
    if ($('input[name=validate]:checked').val() === 'yes') {
        if (!formValid()) {
            event.preventDefault(); // Don't submit the form
        }
    }
});

// Perform validations
function formValid() {
    if ($('input[name=street]').val().length == 0) {
        // tell them ...
        return false;
    }
    if ($('input[name=suberb]').val().length == 0) {
        // tell them ...
        return false;
    }
    if ($('input[name=postcode]').val().length == 0) {
        // tell them ...
        return false;
    }

    return true;
}

That should do the trick!

I created a jsfiddle you can mess with further if you want - http://jsfiddle.net/nilbus/JNnuX/2/

Using a checkbox instead

It's pretty similar to use a checkbox. Instead of this

    if ($('input[name=validate]:checked').val() === 'yes') {

just check to see if your checkbox is checked.

    if ($('input[name=validate]').attr('checked')) {

http://jsfiddle.net/nilbus/JNnuX/3/


Need Your Help

Getting base url, development variable, the best way, without using globals

php xml url-routing realpath

In my application architecture I want to replace my globals with something that ain't gonna burn most of the developer's eyes, because I am using globals like this,

AvalonEdit - Ruleset Spans

c# sharpdevelop avalonedit

How to check if a word at a position is in a Span[i] of the xshd-ruleset?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.