JavaScript Help

[JamesU2005]

Hey,

Struggling with some JavaScript validation for a web form.

Basically, if a checkbox is "checked" then do some validation so that the user must select one or the other radio boxes.

Checkbox - Checked THEN one of the two radio boxes below must be selected.

Radio Box
Radio Box

Looking at a dialogue box message.

Thanks,

 

[JamesU2005]

Here's what I have so far.

It's the IF statement of the CHECKBOX I am missing.

So IF checkbox is "checked" then run this.

		{
var chks = document.getElementsByName('radioboxnames');
var checkCount = 0;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
checkCount++;
}
}
if (checkCount < 1)
{
alert("Message here.");
return false;
}
		}
}

 

[Pho]

Use jQuery and make life simple:

$(document).ready(function() {
    
    $('form').submit(function(){
        var required = $('.required').attr('checked') ? true : false;
       
        if (required)
        {
            var checkedCount = $('.shouldcheck:checked').length;
            
            if (checkedCount == 0)
            {
                alert('Fail!');
                return false;
            }
        }
        
        // Prevent submitting
        return false;
    })
});

Demo: http://jsfiddle.net/DKHWw/

 

[Dj_Jestar]

I find using preventDefault() instead of "return false" reduces headaches.

 

[JamesU2005]

Thanks guys.

Not sure if I'm going to be able to install jQuery on the server.

Am I close in terms of using old school Javascript?

 

[JamesU2005]

This doesn't seem to work.

if (document.getElementByName('CheckBoxName').checked) {
	{
var chks = document.getElementsByName('RadioBoxNames');
var checkCount = 0;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
checkCount++;
}
}
if (checkCount < 1)
{
alert("Message here.");
return false;
}
		} }

 

[GaryH-21]

Thanks guys.

Not sure if I'm going to be able to install jQuery on the server.

Am I close in terms of using old school Javascript?

I think all you have to do is upload the jquery.min.js file to the server, include it in the code like a normal JS file, then it should all work fine?

I'm sure someone will correct me if i'm wrong

 

[Dj_Jestar]

Use Google's CDN.

https://developers.google.com/speed/libraries/devguide

 

[JamesU2005]

Ok, I'm using the Jquery code as above, which sorta works, but it stops the form from submitting.

The validation works, but once the dialogue box is shown, the form will no longer submit.

Any ideas?

Could it be because I have existing JavaScript validation and new Jquery validation too?

 

[visibleman]

Due to the return false; which stops the default action.
If you're using this on the form submit event then you'll need to called the form submit() function when validation is successful.

 

[JamesU2005]

Due to the return false; which stops the default action.
If you're using this on the form submit event then you'll need to called the form submit() function when validation is successful.

Thanks. How would I do this in jquery?

 

[Dj_Jestar]

Or a better idea.. don't prevent the default action.

 

[visibleman]

Or a better idea.. don't prevent the default action.

Surely the form will still get submitted once the user clears the alert dialog?
You're going to need to prevent the default action to highlight the error, then submit when it all validates.


JamesU2005 - Use an ELSE condition on the current IF statement and include the submit() function.

Submit function - http://api.jquery.com/submit/
Javascript IF statement - http://www.w3schools.com/js/js_if_else.asp

 

[Dj_Jestar]

*bangs head on desk*

Only prevent the default action if validation fails.

function (event) {
  if (!valid()) {
    event.preventDefault();
  }
}

Using the submit() function unnecessarily (i.e. like that) makes you gay. Fact.

 

[Pho]

For the record the reason I added the extra return false at the bottom was to stop jsfiddle from submitting the form when testing but you'd want to take it out and do like Jestar says.

I find using preventDefault() instead of "return false" reduces headaches.

Always forget about that one, cheers.