[英]Form validation is not working in codeigniter using java script
I am working on Codeigniter and validate form using java script my view file is我正在使用 Codeigniter 并使用 java 脚本验证表单我的视图文件是
<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>
and java script code is和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;
}
}
my actual problem is when i am submit the form it going on javascript after validation its not return error but its going on controller file i want to if validation is fail return on view page and not going on to controller我的实际问题是,当我提交表单时,它在验证后在 javascript 上运行,它不返回错误,但它在控制器文件中,如果验证失败,我想在视图页面上返回而不继续到控制器
You have to return false
on validation if it doesn't pass.如果未通过,则必须在验证时返回false
。 You are also missing a return
statement in onclick
as well.您还缺少onclick
的return
语句。 It should call for validation like onclick="return validation();"
它应该调用像onclick="return validation();"
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
Refer here for more information: JS Validation .有关更多信息,请参阅此处: JS 验证。
I would however recommend you to use a ready-made solution like Validate.js or Parsley .但是,我建议您使用现成的解决方案,例如Validate.js或Parsley 。 They are tried and tested, cover most corner cases which we tend to forget, approved by hundreds of other developers, and save development time.它们经过试验和测试,涵盖了我们往往忘记的大多数极端情况,得到了数百名其他开发人员的认可,并节省了开发时间。
Please add form id in form tag as 'form-id'.And use below solution.请在表单标签中添加表单 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();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.