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之前，我保证标签文本以其初始格式

最后，可以改进这种验证方式，我将尝试通过示例

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

1 个答案: