onsubmit function does not invoke correctly using Node.js-CodePudding

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 >
        <label for="register.username">Username</label>
        <input type="text" name="username" id="register.username"  placeholder="Username" aria-describedby="helpId">
        <small id="helpRegisterUsername" >You should enter a username.</small>
      </div>
      <div >
        <label for="register.password">Password</label>
        <input type="password" name="password" id="register.password"  placeholder="Password" aria-describedby="helpId">
        <small id="helpId" >Enter a password.</small>
      </div>
      <div >
        <label for="register.confirm.password">Confirm password</label>
        <input type="password" name="confirmedPassword" id="register.confirm.password"  placeholder="Confirm password" aria-describedby="helpId">
        <small id="helpId" >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.

CodePudding user response：

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 >
        <label for="register.username">Username</label>
        <input type="text" name="username" id="register.username"  placeholder="Username" aria-describedby="helpId">
        <small id="helpRegisterUsername" >You should enter a username.</small>
      </div>
      <div >
        <label for="register.password">Password</label>
        <input type="password" name="password" id="register.password"  placeholder="Password" aria-describedby="helpId">
        <small id="helpId" >Enter a password.</small>
      </div>
      <div >
        <label for="register.confirm.password">Confirm password</label>
        <input type="password" name="confirmedPassword" id="register.confirm.password"  placeholder="Confirm password" aria-describedby="helpId">
        <small id="helpId" >Confirm password</small>
      </div>
      <input type="submit" id="registerSubmit" value="Submit"></input>

    </form>