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

Question

我正在做表单验证，当我在表单中使用“onsbmit”调用我的函数“validtae()”时，它不起作用。当我单击按钮提交假设发生的验证不起作用我不知道为什么它不起作用，我尝试在 onsubmit 中添加返回仍然不起作用。我尝试在输入标签内使用 onfocus 调用该函数，它可以工作，但是当我单击按钮时我想工作。

// 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

我假设您想知道为什么没有显示错误消息。这可能是因为浏览器对required 属性的自己的验证 在调用onsubmit 之前启动。 IE。 validate 目前甚至没有被调用，您可以通过添加 console.log 调用来轻松验证。

如果这不是您想要的，请删除 required 属性。

// 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>

或者让浏览器处理验证并删除您自己的validate 函数。

Answer 2

如果任何验证检查失败，您应该使用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="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>

Answer 4

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

把提交按钮改成输入，就可以了。