表单验证在使用 java 脚本的代码点火器中不起作用

Question

我正在使用 JavaScript 在 Codeigniter 和验证表单 我的视图文件是

<div class="container">
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-50" >
<form class="login100-form" action="<?php echo base_url('index.php/Customer/addCustomer') ?>" method="post">
<h2 class="login100-form-title p-b-33"> Add Admin </h2>
<div class="form-group ">
<label class="control-label col-md-2 col-sm-6 col-xs-12" >First Name:</label>
<input class="input100" type="text"  id="first_name" placeholder="Enter first_name" name="first_name"/>
<span id="errorfirstname"></span>
</div>
<div class="container-login100-form-btn m-t-20">
<input type="submit" class="btn btn-dark login100-form-btn" id="save" name="save" value="Save" onclick="validation()"/>
</div>
</form>
</div>
</div>
</div>
</div>

而 Java 脚本代码是

function validation() {
if (document.getElementById("first_name").value == "") {
var str = ("First Name may not be blank");
document.getElementById("errorfirstname").innerHTML = str;
} else if (document.getElementById("first_name") != /^[a-zA-Z ]*$/) {
var str = ("Please Enter Only Characters in First name");
} else if (document.getElementById("first_name")) {
var inpObj = document.getElementById("first_name");
if (inpObj.value.length <= 30 && inpObj.value.length >= 3) {
var str = ("Please Type Minmum 3 Characters Maximum 30 Characters ");
document.getElementById("errorfirstname").innerHTML = str;
}
} else {
var str = "Input is Not valid";
document.getElementById("errorfirstname").innerHTML = str;
}
}

我的实际问题是当我在验证后提交表单时，它会在 JavaScript 上返回错误，但它正在控制器文件上，如果验证失败，我想返回视图页面并且不继续控制器

Answer 1

如果验证未通过，则必须返回false。您在onclick中也缺少return语句。它应该像onclick="return validation();"一样需要验证

function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

有关详细信息，请参阅此处：JS 验证。

但是，我建议您使用现成的解决方案，例如Validate.js或Parsley。它们经过尝试和测试，涵盖了我们容易忘记的大多数极端情况，得到了数百名其他开发人员的批准，并节省了开发时间。

Answer 2

请在表单标签中添加表单 ID 作为"表单 ID"。并使用以下解决方案。

document.querySelector("#form-id").addEventListener('submit', (e) => {
//prevent actual submit
e.preventDefault();
//Get form values
const first_name = document.querySelector("#first_name").value;
const errorfirstname = document.querySelector("#errorfirstname");
const letters = /^[a-zA-Z ]*$/;
if (first_name === "") {
errorfirstname.className = "alert alert-danger";
errorfirstname.innerHTML = "First Name may not be blank";
} else if (!first_name.match(letters)) {
errorfirstname.className = "alert alert-danger";
errorfirstname.innerHTML = "Please Enter Only Characters in First name";
} else if (first_name.length < 3 || first_name.length > 30) {
errorfirstname.className = "alert alert-danger";
errorfirstname.innerHTML = "Please Type Minmum 3 Characters Maximum 30 Characters";
} else {
e.submit();
}
});