PowerSchool自定义页面keyup事件脚本未触发问题求助

Hey there! Let's walk through the issues in your code that are causing the keyup event not to fire and the submit button to misbehave. I'll break this down clearly so you can fix it step by step:

Key Issues & Fixes #

• jQuery Alias Mismatch
  You're using $j in your script, but the jQuery library you loaded uses the default alias $ (unless PowerSchool explicitly maps jQuery to $j, which isn't standard). This means your entire script isn't running at all! Fix this by either:

  • Replacing all instances of $j with $, or
  • Adding var $j = jQuery; at the top of your script to define the alias.

• Incorrect Student Grade Selector
  Your student grade is a <label> element, not an <input>, but you're trying to select it with input[name='studentGrade']—this returns an empty set, so your grade-based password check fails. Change the selector to grab the label's text content instead:

  var studentGrade = parseInt($j("label[name='studentGrade']").text());
  

  We use parseInt() to convert the text "3" into a number for proper comparison.

• Broken Password Length Logic
  Your condition current_password.length<5 && current_password>8 is impossible—no string can be shorter than 5 and longer than 8 at the same time. You meant to use an OR operator (||) here:

  if (current_password.length < 5 || current_password.length > 8 || !hasNumber.test(current_password)) {
      password_valid = false;
  }
  

  This checks if the password is too short, too long, or missing a number—any of these will mark it invalid.

• Submit Button Selector & State Error
  Your button has name="submit" but no id="submit", so $j("#submit") can't find it. Also, you're using .show() to enable a disabled button—you need to toggle the disabled property instead. Update the button's HTML to add an id, then fix the script:
  HTML:

  <button id="submit" name="submit" type="button" disabled>Submit</button>
  

  Script:

  $j("#submit").prop('disabled', false);
  

• Unused/Misconfigured Special Character Regex
  Your hasSpeacialCharacters regex is defined but never used, and it's set to match strings without special characters. If you intended to require special characters for older grades, you'd need to adjust the regex and add it to your validation logic. For now, you can either remove it or repurpose it as needed.

Fixed Full Code #

Here's the updated code with all the fixes applied, plus an extra check to re-disable the button if the password becomes invalid later:

<!DOCTYPE html>
<html>
<!-- start right frame -->
<head>
    <title>Student Information</title>
</head>
<body>
    <form id="StudentInformationForm" action="/admin/changesrecorded.white.html" method="POST">
        <!-- start of content and bounding box -->
        <div class="box-round">
            <table border="0" cellspacing="0" cellpadding="3" class="linkDescList">
                <colgroup>
                    <col>
                    <col>
                </colgroup>
                <tr>
                    <td colspan="2">
                    </td>
                </tr>
                <tr class="headerRow">
                    <td colspan="2" class="bold">-Student Information</td>
                </tr>
                <tr class="Information">
                    <td>
                        <div>
                            <label>Student Email Address</label>
                            <input type="text" name="studentEmailAddress" />
                        </div>
                        <div>
                            <label>Student Password</label>
                            <input type="text" name="studentWebPassword" />
                        </div>
                        <div>
                            <label>Grade</label>
                            <label name="studentGrade">3</label>
                        </div>
                        <div>
                            <button id="submit" name="submit" type="button" disabled>Submit</button>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        // Define $j alias to match your code style
        var $j = jQuery;
        $j(function(){
            $j("body").on("keyup","input[name='studentWebPassword']",function(){
                var current_password = $j("input[name='studentWebPassword']").val();
                var studentGrade = parseInt($j("label[name='studentGrade']").text());
                var password_valid = true;
                var hasNumber = /\d/;

                if(studentGrade >= 6) {
                    // For grades 6+, password must be 5-8 chars and contain a number
                    if (current_password.length < 5 || current_password.length > 8 || !hasNumber.test(current_password)) {
                        password_valid = false;
                    }
                } else {
                    // For grades 3-5, adjust rules (example: 5+ chars with a number)
                    if (current_password.length < 5 || !hasNumber.test(current_password)) {
                        password_valid = false;
                    }
                }

                if (password_valid && current_password !== '') {
                    $j("#submit").prop('disabled', false);
                } else {
                    // Re-disable button if password becomes invalid
                    $j("#submit").prop('disabled', true);
                }
            });
        });
    </script>
</body>
</html><!-- end right frame -->

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