javascript - 不断收到错误：未捕获的类型错误：无法读取未定义的属性“querySelector”

Question

我收到一个错误，上面写着 Uncaught TypeError: Cannot read property 'querySelector' of undefined while date validation。任何帮助将不胜感激。

这是我的 JSP 页面表单

  <form id="reg-form" action="RegisterServlet" methods="POST" class="form">
                                      
                                            <div class="mb-3 form-field">
                                              <label for="user_name" class="form-label">UserName</label>
                                              
                                              <input name="user_name" type="text" class="form-control" id="username" placeholder="Enter name">
                                              <small style="color: red;"></small>

                                            </div>
                                            <div class="mb-3 form-field">
                                              <label for="user_email" class="form-label">Email address</label>
                                              <input name="user_email" type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter Email">
                                             
                                                 <small style="color: red;" ></small>

                                            </div>
                                            <div class="mb-3 form-field">
                                              <label for="user_password" class="form-label">Password</label>
                                              <input name="user_password" type="password" class="form-control" id="password" placeholder="Enter password">
                                                   <small style="color: red;"></small>

                                            </div>
                                      
                                            <div class="mb-3 form-field"> 
                                              <label for="confirm_password">Confirm Password</label>
                                              <input type="password" placeholder="confirm Password" name="confirm_password" class="form-control" id="confirm-password" >
                                                <small style="color: red;"></small>
                                             </div>
                                      
                                            <div class="mb-3 form-field"> 
                                            <label for="user_dob">Date of Birth</label>
                                            <input type="text" placeholder="Enter DOB" class="form-control" name="user_dob" id="dob" >
                                              <small style="color: red;"></small>
                                            </div>
                                      
                                           
                                            <div class="mb-3 form-field">
                                              <label for="user_regid" class="form-label">Registration ID</label>
                                              <input type="text" name="user_regid" class="form-control" id="regid" aria-describedby="regid" placeholder="Enter Reg. ID">
                                                 <small style="color: red;"></small>

                                            </div>
                                      
                                             <div class="mb-3 form-field">
                                              <label for="user_rollno" class="form-label">Roll No.</label>
                                              <input type="text" name="user_rollno" class="form-control" id="roll" aria-describedby="year" placeholder="(e.g) 31384">
                                                 <small style="color: red;"></small>

                                            </div>
                                      
                                           
                                      
                                            <div class="mb-3 form-field">
                                              <label for="user_no" class="form-label">Contact No.</label>
                                              <input type="text" class="form-control" name="user_no"  id="" aria-describedby="year" placeholder="Enter 10-digit phone number">
                                                  <small style="color: red;"></small>

                                            </div>
                                      
                                           
                                      
                                          
                                      
                                      
                                            <div class="mb-3 form-field">
                                              <input type="checkbox" name="user_check" class="form-check-input" id="exampleCheck1">
                                              <label class="form-check-label" for="exampleCheck1">I Agree terms and conditions</label>
                                            </div>
                                      
                                      
                                      <br>
                                      <div class="container text-center" style="display: none" id="loader">
                                      <span class="fa fa-refresh fa-spin fa-4x"></span>
                                      <h4> Please wait...</h4>
                                      </div>
                                      <br>
                                            <button id="submit"  type="submit" class="btn btn-primary bg-dark">Submit</button>
                                          </form>

这是发生错误的部分（日期验证）

 <div class="mb-3 form-field"> 
 <label for="user_dob">Date of Birth</label>
  <input type="text" placeholder="Enter DOB" class="form-control" name="user_dob" id="dob" >
  <small style="color: red;"></small>
  </div>

这是我的 JS Code Posting Only 发生错误的部分。

const dateE1=document.getElementById('dob');

const debounce = (fn, delay = 500) => {
    let timeoutId;
    return (...args) => {
        // cancel the previous timer
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        // setup a new timer
        timeoutId = setTimeout(() => {
            fn.apply(null, args)
        }, delay);
    };
};


form.addEventListener('input', debounce(function (e) {
    switch (e.target.id) {
        case 'username':
            checkUsername();
            break;
        case 'email':
            checkEmail();
            break;
        case 'password':
            checkPassword();
            break;
        case 'confirm-password':
            checkConfirmPassword();
            break;
        case 'dob':
            checkDate();
            break;
    }
}));

const checkDate = () => {

    let valid = false;

   

    const mydate = dateE1.value.trim();

    if (!isRequired(mydate)) {
        showError(mydate, 'date cannot be blank');
    } 
    else {
        showSuccess(mydate);
        valid = true;
    }
    return valid;
};

const isRequired = value => value === '' ? false : true;

const showError = (input, message) => {
    // get the form-field element
    const formField = input.parentElement;
    // add the error class


    // show the error message    const error = formField.querySelector('small');

    const error = formField.querySelector('small');
    error.textContent = message;
};

const showSuccess = (input) => {
    // get the form-field element
    const formField = input.parentElement;



    // hide the error message
    const error = formField.querySelector('small');
    error.textContent = '';
}

任何帮助将不胜感激