表单上的 onsubmit = "function( )" 不起作用

Question

I'm doing form validation, when I call my function 'validtae( )' using 'onsbmit' in the form it doesn't work. when I click the button submit the validation that supposes to happen doesn't work I have no idea why it's not working, I tried to add return in onsubmit still not working. I tried calling the function with onfocus inside the input tag and it works but I want to work when I click the button.

 // getting inputs const namee = document.forms['myForm']['name']; const email = document.forms['myForm']['email']; const password =document.forms['myForm']['password']; // getting where the erroe gonna show const nameerror = document.querySelector('#nameerror'); const emailerror = document.querySelector('#emailerror'); const passworderror = document.querySelector('#passworderror'); // validation function function validate(){ if(namee.value == "" ){ namee.style.border = "2px solid red"; nameerror.textContent ="name cannot be blank"; namee.focus(); return false; } if(email.value == "" ){ email.style.border = "2px solid red"; emailerror.textContent ="email cannot be blank"; email.focus(); return false; } if(password.value == "" ){ password.style.border = "2px solid red"; passworderror.textContent ="password cannot be blank"; password.focus(); return false; } }

 <form name="myForm" method="post" onsubmit="return validate()"> <input type="text" id="name" name="name" placeholder="Name" required> <div id="nameerror"></div> <input type="email" id="email" name="email" placeholder="Email" required> <div id="emailerror"></div> <input type="password" id="password" name="password" placeholder="Create a password" required> <button id="submit" type="submit">Sign Up</button> </form>

Answer 1

I assume you are wondering why the error message isn't shown. That's likely because the browser's own validation for the required attribute kicks in before onsubmit is called. Ie validate isn't even called at the moment, which you can easily verify by adding a console.log call.

If that's not what you want then remove the required attributes.

 // getting inputs const namee = document.forms['myForm']['name']; const email = document.forms['myForm']['email']; const password =document.forms['myForm']['password']; // getting where the erroe gonna show const nameerror = document.querySelector('#nameerror'); const emailerror = document.querySelector('#emailerror'); const passworderror = document.querySelector('#passworderror'); // validation function function validate(){ if(namee.value == "" ){ namee.style.border = "2px solid red"; nameerror.textContent ="name cannot be blank"; namee.focus(); return false; } if(email.value == "" ){ email.style.border = "2px solid red"; emailerror.textContent ="email cannot be blank"; email.focus(); return false; } if(password.value == "" ){ password.style.border = "2px solid red"; passworderror.textContent ="password cannot be blank"; password.focus(); return false; } }

 <form name="myForm" method="post" onsubmit="return validate()"> <input type="text" id="name" name="name" placeholder="Name"> <div id="nameerror"></div> <input type="email" id="email" name="email" placeholder="Email"> <div id="emailerror"></div> <input type="password" id="password" name="password" placeholder="Create a password" > <button id="submit" type="submit">Sign Up</button> </form>

Alternatively just let the browser handle the validation and remove your own validate function.

Answer 2

If any of the validation checks failed you should use event.preventDefault()

function validate(event){
    let invalid = 0
    if (namee.value == "" ) {
        namee.style.border = "2px solid red";
        nameerror.textContent ="name cannot be blank";
        namee.focus();
        invalid++;
    }
    if (email.value == "" ){
        email.style.border = "2px solid red";
        emailerror.textContent ="email cannot be blank";
        email.focus();
        invalid++;
    }
    if (password.value == "" ){
        password.style.border = "2px solid red";
        passworderror.textContent ="password cannot be blank";
        password.focus();
        invalid++;
    }
    if (invalid > 0) {
        event.preventDefault()
        return false
    }
}

Answer 3

<input type="submit" value="submit"/>

Change the submit button to input, it will work.

Answer 4

Check this out

 <input type="text" id="name" name="name" placeholder="Name" required> <div id="nameerror"></div> <input type="email" id="email" name="email" placeholder="Email" required> <div id="emailerror"></div> <input type="password" id="password" name="password" placeholder="Create a password" required> <button onsubmit="validate()" id="submit" type="submit">Sign Up</button>