javascript - 表单验证在使用 java 脚本的 codeigniter 中不起作用
问题描述
我正在使用 Java 脚本处理 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 上运行,它不会返回错误,但它会在控制器文件上运行,如果验证失败,我想在视图页面上返回,而不是在控制器上运行
解决方案
false
如果没有通过,您必须返回验证。你也错过了一个return
声明onclick
。它应该要求像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。它们经过试验和测试,涵盖了我们容易忘记的大多数极端情况,得到了数百名其他开发人员的认可,并节省了开发时间。
推荐阅读
- scala - flink 数据不是由 timewindow 算子中的 process 函数处理的
- python-3.x - 如何每次将命令行文件保存为 .txt 文件。在 CMD 中需要显示 speedtest 输出,将这些命令行保存为 .txt 文件
- gradle - 有什么方法可以清理 gradle 6.0.1 中的所有项目
- android - 无法将意图值传递给下一个活动
- listview - Xamarin.Forms - 滚动视图中的列表视图和条目
- java - 我们如何遍历多个列表并使用 java 流调用 setter 方法
- html - SVG悬停上的平滑过渡线性渐变
- xcode - 如何防止始终询问 Mac OS 钥匙串权限
- java - Maven 无法从 https://repo.maven.apache.org/maven2 下载依赖项/插件
- c - C - 在 Cortex-R5 上的 memcmp 期间偶尔出现 CPU 停顿