提交前如何验证多个功能？

Question

所以我试图验证一个表单，当我运行我的代码时，验证工作并显示函数值，但之后立即消失。我究竟做错了什么？我怎样才能让它在提交前先验证？

HTML：

<form name="myForm" id="form" action="#" onsubmit="validateForm()" method="POST">

   <div class="form-group">
      <label id="first" for="firstName">First Name:</label>
      <input id="firstName" name="fname" class="form-control" type="text" placeholder="John"/>
   </div>
   <div class="form-group">
      <label id="emails" for="email">Email: </label>
      <input id="email" name="email" class="form-control" type="email" placeholder="email@domain.com"/>
      </div>
   <div class="form-group">
      <label id="address1" for="street">Street Address:</label>
      <input id="street" name="street" class="form-control" type="text" placeholder="123 Lane Street"/>
   </div>
   <input type="submit" value="Submit Button">
 </form>

JavaScript 文件：

function validateForm() {
   var nameValid = validateName();
   var addressValid = validateAddress1()
   var emailValid = validateEmail();

function validateName() {
    var name = document.forms["myForm"]["fname"].value;;
    if (name == null || name == "") {
        document.getElementById('first').style.color = "Red";
        document.getElementById('first').innerHTML = "First Name *Required";
        document.getElementById('firstName').style.f = "Red";
        return false;
    }
}

function validateAddress1() {
    var address = document.forms["myForm"]["street"].value;
    if (address == null || address == "") {
        document.getElementById('address1').style.color = "Red";
        document.getElementById('address1').innerHTML = "Street Address *Required";
        document.getElementById('street').style.f = "Red";
        return false;
    }
}

function validateEmail() {
    var email = document.forms["myForm"]["email"].value;
    if (email == null || email == "") {
        document.getElementById('emails').style.color = "Red";
        document.getElementById('emails').innerHTML = "Email *Required";
        document.getElementById('email').style.f = "Red";
        return false;
    }
}
};

Answer 1

首先删除提交表单时的默认行为。将event作为参数添加到函数中，然后添加event.preventDefault();

然后修改函数，如果输入数据有效则返回true，否则返回false。

然后验证是否至少有一个方法返回false，如果是，则从那里返回。

请看这个例子

function validateForm(event) {
    event.preventDefault();
    var nameValid = validateName();
    var addressValid = validateAddress1()
    var emailValid = validateEmail();

    if (!nameValid || !addressValid || !emailValid) {

        return;
    }

    // programatically submit the form > event.target.submit();
    event.target.submit();
}

function validateName() {
    var name = document.forms["myForm"]["fname"].value;;
    if (name == null || name == "") {
        document.getElementById('first').style.color = "Red";
        document.getElementById('first').innerHTML = "First Name *Required";
        document.getElementById('firstName').style.f = "Red";
        return false;
    }

    document.getElementById('first').style.color = 'black';
    document.getElementById('first').innerHTML = 'First Name';

    return true;
}

function validateAddress1() {
    var address = document.forms["myForm"]["street"].value;
    if (address == null || address == "") {
        document.getElementById('address1').style.color = "Red";
        document.getElementById('address1').innerHTML = "Street Address *Required";
        document.getElementById('street').style.f = "Red";
        return false;
    }

    document.getElementById('address1').style.color = 'black';
    document.getElementById('address1').innerHTML = 'Street Address:';

    return true;
}

function validateEmail() {
    var email = document.forms["myForm"]["email"].value;
    if (email == null || email == "") {
        document.getElementById('emails').style.color = "Red";
        document.getElementById('emails').innerHTML = "Email *Required";
        document.getElementById('email').style.f = "Red";
        return false;
    }

    document.getElementById('emails').style.color = 'black';
    document.getElementById('emails').innerHTML = 'Email:';

    return true;
}

<form name="myForm" id="form" action="#" onsubmit="validateForm(event)" method="POST">
    <div class="form-group">
        <label id="first" for="firstName">First Name:</label>
        <input id="firstName" name="fname" class="form-control" type="text" placeholder="John" />
    </div>
    <div class="form-group">
        <label id="emails" for="email">Email: </label>
        <input id="email" name="email" class="form-control" type="email" placeholder="email@domain.com" />
    </div>
    <div class="form-group">
        <label id="address1" for="street">Street Address:</label>
        <input id="street" name="street" class="form-control" type="text" placeholder="123 Lane Street" />
    </div>
    <input type="submit" value="Submit Button">
</form>

为了消除红色文本被批准验证的经验，在返回true之前我保证标签的文本是它的初始格式

最后这种验证方式可以改进我会尝试通过一个例子