how to validate userinput with javascript

Question

I have this scenario where i have 4 drop down boxes, where you can choose CM for a carport and a shed, within that carport.

I want to prompt the user with messages/errors in these scenarios:

• the shed is chosen to be wider than it is long.
• the shed is atleast 60cm smaller than the carports in both width and length
• only one of the sheds dimensions being chosen

the form looks like this

    <form name="createorder" action="FrontController" method="POST">
        <input type="hidden" name="command" value="createorder">
        <br>
        Length of shed:<br>
        <select name="lengthShed">
            <option value="0">I do not want a shed</option>
            <option value="180">180cm</option>
            <option value="210">210cm</option>
            <option value="240">240cm</option>
            <option value="270">270cm</option>
            <option value="300">300cm</option>
            <option value="330">330cm</option>
            <option value="360">360cm</option>
            <option value="390">390cm</option>
            <option value="420">420cm</option>
            <option value="450">450cm</option>
            <option value="480">480cm</option>
            <option value="510">510cm</option>
            <option value="540">540cm</option>
            <option value="570">570cm</option>
            <option value="600">600cm</option>
            <option value="630">630cm</option>
            <option value="660">660cm</option>
            <option value="690">690cm</option>
            <option value="720">720cm</option>
        </select>
        <br>
        Width of shed:<br>
        <select name="widthShed">
            <option value="0">I do not want a shed</option>
            <option value="18=">180cm</option>
            <option value="210">210cm</option>
            <option value="240">240cm</option>
            <option value="270">270cm</option>
            <option value="300">300cm</option>
            <option value="330">330cm</option>
            <option value="360">360cm</option>
            <option value="390">390cm</option>
            <option value="420">420cm</option>
            <option value="450">450cm</option>
            <option value="480">480cm</option>
            <option value="510">510cm</option>
            <option value="540">540cm</option>
            <option value="570">570cm</option>
            <option value="600">600cm</option>
            <option value="630">630cm</option>
            <option value="660">660cm</option>
            <option value="690">690cm</option>
        </select>
        <br>
        Width:<br>
        <select name="width">
            <option value="240">240cm</option>
            <option value="270">270cm</option>
            <option value="300">300cm</option>
            <option value="330">330cm</option>
            <option value="360">360cm</option>
            <option value="390">390cm</option>
            <option value="420">420cm</option>
            <option value="450">450cm</option>
            <option value="480">480cm</option>
            <option value="510">510cm</option>
            <option value="540">540cm</option>
            <option value="570">570cm</option>
            <option value="600">600cm</option>
            <option value="630">630cm</option>
            <option value="660">660cm</option>
            <option value="690">690cm</option>
            <option value="720">720cm</option>
            <option value="750">750cm</option>
        </select>
        <br>
        Length:<br>
        <select name="length">
            <option value="240">240cm</option>
            <option value="270">270cm</option>
            <option value="300">300cm</option>
            <option value="330">330cm</option>
            <option value="360">360cm</option>
            <option value="390">390cm</option>
            <option value="420">420cm</option>
            <option value="450">450cm</option>
            <option value="480">480cm</option>
            <option value="510">510cm</option>
            <option value="540">540cm</option>
            <option value="570">570cm</option>
            <option value="600">600cm</option>
            <option value="630">630cm</option>
            <option value="660">660cm</option>
            <option value="690">690cm</option>
            <option value="720">720cm</option>
            <option value="750">750cm</option>
            <option value="780">780cm</option>
        </select>

Answer 1

Bind a function to your <select> elements onchange property.

let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
    selects[i].onchange = function(){
        // Check for your conditions
        // If your warning conditions are met, prompt user
    }
}

That is, assuming you want the validation to happen when the user changes one of the select's values.

If you want to validate with a button click, you can instead bind the function to the click event of the button.

let button = document.getElementById(buttonID);
button.onclick = function(){
    // Check for your conditions
    // If conditions are met, prompt user
}

To prompt the user, you can use a simple alert() to which you pass your message. Or make a more elaborate function to do something custom.

As for your conditions, that sounds like commercial math. Might have to split your question in multiple questions here as there are a lot of possible awnsers.

It might be easier for you to add IDs to your selects so you can get them via document.getElementById(idString). You can then get their value through document.getElementById(idString).value. And to use it in math solving, you will need to parse the string that the <select> will return as value, like so parseInt(document.getelementById(idString).value).