如何用JavaScript验证车棚与附属棚尺寸选择表单的用户输入

Let's walk through implementing the required validation for your form step by step. First, let's restate the error scenarios we need to catch clearly:

• Shed width is greater than shed length: If the user opts for a shed, its width shouldn't exceed its length.
• Shed dimensions aren't at least 60cm smaller than carport dimensions: Both the shed's width and length need to be a minimum of 60cm less than the corresponding carport measurements.
• Partial shed dimension selection: Users can't pick only a shed length or only a shed width — they need to choose both, or select "I do not want a shed" for both fields.

First, I fixed a small typo in your original form code (the widthShed dropdown had an invalid option value 18= instead of 180), then added client-side JavaScript validation to handle all three scenarios. Here's the complete, updated form:

Modified Form with Validation #

<form name="createorder" action="FrontController" method="POST" onsubmit="return validateForm()">
    <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="180">180cm</option> <!-- Fixed typo here -->
        <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 (Carport):<br> <!-- Added clarity to avoid confusion -->
    <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 (Carport):<br> <!-- Added clarity to avoid confusion -->
    <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>
    <br><br>
    <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
    // Parse form values as integers for calculations
    const shedLength = parseInt(document.forms["createorder"]["lengthShed"].value);
    const shedWidth = parseInt(document.forms["createorder"]["widthShed"].value);
    const carportWidth = parseInt(document.forms["createorder"]["width"].value);
    const carportLength = parseInt(document.forms["createorder"]["length"].value);
    
    // Check for partial shed selection first
    if ((shedLength === 0 && shedWidth !== 0) || (shedLength !== 0 && shedWidth === 0)) {
        alert("Please select both shed length and width, or choose 'I do not want a shed' for both fields.");
        return false;
    }
    
    // Skip remaining checks if user doesn't want a shed
    if (shedLength === 0 && shedWidth === 0) {
        return true;
    }
    
    // Check if shed width is greater than its length
    if (shedWidth > shedLength) {
        alert("Shed width cannot be larger than shed length. Please adjust your selection.");
        return false;
    }
    
    // Check if shed dimensions are at least 60cm smaller than carport
    if ((carportWidth - shedWidth) < 60 || (carportLength - shedLength) < 60) {
        alert("Shed width and length must each be at least 60cm smaller than the corresponding carport dimensions.");
        return false;
    }
    
    // All validation checks passed
    return true;
}
</script>

Key Details: #

1. Typo Fix: Corrected the invalid value="18=" in the shed width dropdown to ensure validation logic works correctly.
2. Label Clarity: Added "(Carport)" to the carport dimension labels to prevent users from mixing up shed and carport fields.
3. Validation Flow: The validateForm() function checks scenarios in a logical order:
   • First catches partial shed selections
   • Skips further checks if no shed is requested
   • Then verifies shed width doesn't exceed its length
   • Finally ensures shed dimensions are sufficiently smaller than carport measurements
4. User Feedback: Uses clear, specific alerts to let users know exactly what needs to be fixed.

Critical Reminder: #

Client-side validation is great for user experience, but it can be bypassed. Always replicate these validation checks on your server-side FrontController to ensure invalid data doesn't get processed or stored.

内容的提问来源于stack exchange，提问作者Jonas Grønbek