Setting rules on a form

Question

So, I need a function to check if the rules I've made apply to the options I have in my form.

The first box is a name box and it needs to have at least three letters and contain at least one whitespace to pass. The other box is age, it needs to have a number between 1 and 125, I can do that on my own but I'm thinking there might be a nice way to set all of the rules at once so I thought I'd include it.

The third option is a set of three radio buttons of which one has to be selected and the fourth box is an info box that should consist of a text with at least 30 letters. These rules should be checked on the press of a button, this is how far I've gotten on my own:

var sendButton = $("button:first").addClass("sendButton");
var age = document.getElementsByName('age')[0].value;

sendButton.click(function(){
    var infoName = document.getElementsByName('infoName')[0].value;
    if (infoName.length<3){
    console.log("Your name must consist of at least three letters and contain a whitespace");
    };
    }
});


        <section class="column">
        <h2>Contact us</h2>
        <form action="#">
            <fieldset>
                <legend>Form</legend>
                <div class="textinput">
                    <label for="infoName">Ditt namn:</label>
                    <input type="text" name="infoName" placeholder="ex. John Doe">
                </div>

                <div class="textinput">
                    <label for="infoName">Din ålder:</label>
                    <input type="text" name="age" placeholder="ex. 25">
                </div>

                <div class="radioSelection">
                    <label>Choose your favorite</label>            
                    <input type="radio" name="favorite" id="html" value="html">
                    <label for="html">HTML</label>
                    <input type="radio" name="favorite" id="js" value="js">
                    <label for="js">JavaScript</label>
                    <input type="radio" name="favorite" id="css" value="css">
                    <label for="css">CSS</label>
                </div>

                <div class="textareainput">
                    <label for="info">Info about you:</label>
                    <textarea placeholder="Type something about yourself, this area must contain 30 letters or more"></textarea>
                </div>

                <div class="action">
                    <button>Send</button>
                </div>

Answer 1

function validateForm(){
    var infoName = document.getElementsByName('infoName')[0].value;
    var age= document.getElementsByName('age')[0].value;
    var favourites = document.getElementsByName('favorite');

    var problems = 0;

    if(infoName.length < 3){
        // Failed length validation
        problems++;
    }

    var spaceIndex = infoName.indexOf(' ');

    if(spaceIndex === -1){
        // Name does not contain a space.
        problems++;
    }
    else if(spaceIndex === 0){
        // Name begins with space
        problems++;
    }
    else if(spaceIndex === infoName.length - 1){
        // Space is last character.
        problems++;
    }         

    var hasCheck = false;
    for(var i = 0; i < favourites.length; i++){
        if(favourites[i].checked){
            hasCheck = true;
            break;
        }
    }

    if(!hasCheck){
        // No radio button has been checked.
        problems++;
    }

    var ageNum = parseInt(age);
    if(isNaN(ageNum)) {
        // Age is not a number
        problems++;
    }
    else if(ageNum < 1 || ageNum > 125){
        // Age is not within boundaries
        problems++;
    }

    /// etc etc, for all your validations.

    return problems === 0;
}

At the end of the validation, if any problems are detected, the form will not be submitted (because problems === 0 is false). Also the number validation I've put in there is not very robust. Check out this question which goes into detail about number validation.

The validation method should be called on submission of the form, rather than when the button is clicked

$('form').submit(function(e){
    var valid = validateForm();
    if(!valid){
        e.preventDefault();
        return false;
    }
});