onsubmit function 未使用 Node.js 正确调用

Question

I want to make some validations when the form submitted. However when the form submitted validation function seems like invoking correctly. The alert part doesn't come up but when i try to alert like this

function validation(){
      alert("somethinglol");
      var username = $("#register.username").val().toString();
     
       
       
       alert(username);
     };

somethinglol appears but the second alert doesn't.

This is my get function:

app.get('/', (req, res) => {
    res.render('index.ejs');
})

This is the index.ejs

<form id="form1" action="/" method="post" onSubmit="validation();">
      <div class="form-group">
        <label for="register.username">Username</label>
        <input type="text" name="username" id="register.username" class="form-control" placeholder="Username" aria-describedby="helpId">
        <small id="helpRegisterUsername" class="text-muted">You should enter a username.</small>
      </div>
      <div class="form-group">
        <label for="register.password">Password</label>
        <input type="password" name="password" id="register.password" class="form-control" placeholder="Password" aria-describedby="helpId">
        <small id="helpId" class="text-muted">Enter a password.</small>
      </div>
      <div class="form-group">
        <label for="register.confirm.password">Confirm password</label>
        <input type="password" name="confirmedPassword" id="register.confirm.password" class="form-control" placeholder="Confirm password" aria-describedby="helpId">
        <small id="helpId" class="text-muted">Confirm password</small>
      </div>
      <input type="submit" id="registerSubmit" value="Submit"></input>

    </form>

This is the script part of index.js which contains the validation() function.

<script>
     function validation(){
      alert($("#register.username").val().toString());
      var username = $("#register.username").val().toString();
      username = "somethinglol";
       
       
       alert(username);
     };
</script>

I have changed the script as external but it didn't work. I have changed the jquery cdn. I used $("#registerSubmit").click(...) instead of onSubmit but it didn't work again. I also tried something using async and await but if it's the problem I am not sure that I did it correctly.

Answer 1

with jquery you can use $( "#form1" ).submit(function( event ) { to perform an action before the submit

moreover to select id with dot (.) in jquery you have to use \\ before dot

$("#register\\.username")

 $( "#form1" ).submit(function( event ) { alert($("#register\\.username").val().toString()); var username = $("#register\\.username").val().toString(); username = "somethinglol"; alert(username); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form1" action="/" method="post" onSubmit="validation();"> <div class="form-group"> <label for="register.username">Username</label> <input type="text" name="username" id="register.username" class="form-control" placeholder="Username" aria-describedby="helpId"> <small id="helpRegisterUsername" class="text-muted">You should enter a username.</small> </div> <div class="form-group"> <label for="register.password">Password</label> <input type="password" name="password" id="register.password" class="form-control" placeholder="Password" aria-describedby="helpId"> <small id="helpId" class="text-muted">Enter a password.</small> </div> <div class="form-group"> <label for="register.confirm.password">Confirm password</label> <input type="password" name="confirmedPassword" id="register.confirm.password" class="form-control" placeholder="Confirm password" aria-describedby="helpId"> <small id="helpId" class="text-muted">Confirm password</small> </div> <input type="submit" id="registerSubmit" value="Submit"></input> </form>