JavaScript表单验证功能失效问题排查（附相关代码）

Let's break down the issues in your code that are causing the form validation to fail, step by step:

1. Critical Typo Breaking Method Execution #

In your #room_number keyup handler, you wrote:

$("#duplicate_error").removeVlass('hide');

That's a typo — it should be removeClass, not removeVlass. This mistake will throw a JavaScript error, preventing the error message from becoming visible, and may even halt other validation logic entirely.

2. Event Conflict Overriding Style Changes #

You’ve bound a keyup event to all .validate-required inputs that automatically removes the has-error class and hides error messages. If #room_number also has the validate-required class, these two keyup events will fire in sequence:

• When validation fails, you add has-error to the form group
• Immediately after, the generic .validate-required event removes the has-error class
  The result? The error state never stays visible to the user.

3. Mismatched Variable in Validation Logic #

Your validateRoomNumber function is pulling the value of #floor_number instead of #room_number:

var FloorNumber = $("#floor_number").val().trim();

This is a logical error — you’re validating the floor number against your room number array, which will never produce the correct result. You should be grabbing the value of the room number input instead:

var RoomNumber = $("#room_number").val().trim();

4. Unconfirmed Array Initialization #

You reference arrayOfAssignedRoomNumber in your loop, but there’s no guarantee this array is properly set up:

• If it’s undefined, your code will throw an error
• If it’s empty, the loop will never run, and validation will always return true
• If the data format in the array doesn’t match the input value (e.g., numbers vs. strings), your comparison logic will fail

5. Potential DOM Loading Issue #

If your event binding code isn’t wrapped in $(document).ready() (or a DOMContentLoaded listener), it will run before the form elements exist in the DOM. This means no events get attached, and your validation code never triggers at all.

Fixes to Apply #

Here’s how to resolve these issues:

1. Correct the typo: Replace removeVlass with removeClass
2. Fix the event conflict (either option works):
   • Remove validate-required from #room_number if it doesn’t need generic required validation
   • Add an else clause to the #room_number handler to only clear errors when validation passes
3. Fix the variable mismatch in validateRoomNumber to target the correct input
4. Ensure arrayOfAssignedRoomNumber is initialized with valid data before validation runs
5. Wrap all your code in a DOM-ready handler to guarantee elements exist when events are bound

Example corrected code snippet:

$(document).ready(function() {
    // Initialize your room number array with valid data
    var arrayOfAssignedRoomNumber = ["101", "102", "201"];

    $(":input.validate-required").on('keyup', function() { 
        $(this).closest(".form-group").removeClass("has-error"); 
        $(this).next('small').addClass('hide'); 
    });

    $("#room_number").on('keyup', function() { 
        if (!validateRoomNumber()) { 
            $(this).closest(".form-group").addClass("has-error"); 
            $("#duplicate_error").removeClass('hide'); 
        } else {
            $(this).closest(".form-group").removeClass("has-error"); 
            $("#duplicate_error").addClass('hide'); 
        }
    });

    function validateRoomNumber() { 
        var RoomNumber = $("#room_number").val().trim(); 
        for (var i = 0; i < arrayOfAssignedRoomNumber.length; i++) {
            if (arrayOfAssignedRoomNumber[i] === RoomNumber) {
                return false; // Room number already exists
            }
        }
        return true; // Room number is valid
    }
});

内容的提问来源于stack exchange，提问作者Nida Amin