基于jQuery Steps的分步表单验证问题：仅第一步校验姓名与邮箱

Hey there, let's walk through the issues in your code that are preventing your validation from working as expected, and fix them up step by step:

1. ValidateField 函数逻辑混乱且顺序错误 #

Your current ValidateField tries to handle name, email, and number validation all in one function, but once the first validation check passes, it immediately return true — which means the email and number checks never run. Even if the first check fails, the subsequent ones won't execute either because of the early return.

2. Multiple return statements in onStepChanging #

In the onStepChanging handler, you've got three consecutive return lines:

return ValidateField('measurename' + currentIndex);
return ValidateField('measuremail' + currentIndex);
return ValidateField('measureinput' + currentIndex);

The first return kills the function right away, so the other two validations never get triggered.

3. Typos and syntax errors #

• Your email input has a class of measureemail, but your code references measuremail (missing an 'e') — so it can't find the email field to validate.
• There's an extra plus sign in $("."+ + classNameOfField) — that should be $("." + classNameOfField).

4. No step-specific validation #

You aren't distinguishing between the first step (where you need to validate name/email) and other steps (where you only need number validation).

Fixed Full Code #

JavaScript #

$(function() { 
    $("#wizard").steps({ 
        headerTag: "h2", 
        bodyTag: "section", 
        transitionEffect: "slideLeft", 
        stepsOrientation: "vertical", 
        enableKeyNavigation: true, 
        onStepChanging: function(event, currentIndex, newIndex) { 
            // Clear error messages for the current step
            if (currentIndex === 0) {
                clearErrorMessage('measurename');
                clearErrorMessage('measureemail');
            } else {
                clearErrorMessage('measureinput' + currentIndex);
            }

            // Only validate when moving forward, not backward
            if (currentIndex < newIndex) {
                if (currentIndex === 0) {
                    // Validate name and email only on the first step
                    const nameIsValid = validateName();
                    const emailIsValid = validateEmail();
                    return nameIsValid && emailIsValid;
                } else {
                    // Validate number input for all other steps
                    return validateNumberField('measureinput' + currentIndex);
                }
            } else {
                return true;
            } 
        }, 
        onFinishing: function(event, currentIndex) { 
            // Validate the final step's number input
            return validateNumberField('measureinput' + currentIndex);
        }, 
        onFinished: function(event, currentIndex) { 
            $("#form")[0].submit(); 
        } 
    }); 

    // Validate name field
    function validateName() {
        const nameValue = $(".measurename").val().trim();
        if(/^[a-zA-Z\s]+$/.test(nameValue)){
            return true;
        } else{
            alert('Please enter a valid name (letters and spaces only)');
            showErrorMessage('measurename');
            return false;
        }
    }

    // Validate email field
    function validateEmail() {
        const emailValue = $(".measureemail").val().trim();
        if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test(emailValue)){
            return true;
        } else{
            alert('Please enter a valid email address!');
            showErrorMessage('measureemail');
            return false;
        }
    }

    // Validate 1-3 digit number input
    function validateNumberField(className) {
        const field = $("." + className);
        const fieldValue = field.val().trim();
        if (/^[0-9]{1,3}$/.test(fieldValue)) {
            return true;
        } else {
            showErrorMessage(className);
            return false;
        }
    }

    function showErrorMessage(className) {
        $("." + className).css("border-color", "red");
        $("#errorMessage").css("display", "block");
    } 

    function clearErrorMessage(className) {
        $("." + className).css("border-color", "black");
        $("#errorMessage").css("display", "none");
    } 
}); 

HTML (fixed duplicate IDs too!) #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner"> 
    <div class="content"> 
        <div id="wizard"> 
            <h2>Personal Detail</h2> 
            <section class="tabs-continners"> 
                <input type="text" class="measurename" placeholder="Enter Name" id="personal-name" name="name"> 
                <input type="email" class="measureemail" placeholder="Enter Email" id="personal-email" name="email"> 
            </section> 

            <h2>Across Front</h2> 
            <section class="tabs-continners"> 
                <input type="text" class="measureinput0" placeholder="Enter Measurement In cm" id="across-front" name="across-front"> 
            </section> 

            <h2>Across Back</h2> 
            <section class="tabs-continners"> 
                <input type="text" class="measureinput1" placeholder="Enter Measurement in cm" id="across-back" name="across-back"> 
            </section> 

            <h2>Bundi Length</h2> 
            <section class="tabs-continners"> 
                <input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length"> 
            </section> 

            <h2>Bandhgala Length</h2> 
            <section class="tabs-continners"> 
                <input type="text" class="measureinput3" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length"> 
            </section> 

            <span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span> 
        </div> 
    </div> 
</form>

Key Fixes Explained #

• Split validation functions: Broke name, email, and number validation into separate functions so each one only handles its specific task, no more overlapping logic.
• Step-specific validation: Explicitly check if we're on the first step to validate name/email, and use number validation for all other steps.
• Fixed typos: Corrected the email class name from measuremail to measureemail to match the HTML.
• Removed duplicate returns: In the first step, we validate both name and email, returning true only if both pass.
• Fixed duplicate IDs: Your original HTML had multiple inputs with the same ID (like acrossfront), which is invalid HTML — each input now has a unique ID.

内容的提问来源于stack exchange，提问作者Junaid Khan