问题描述
我一直在研究一个基本的表单验证器。到目前为止……还不算太好。我能够“完成”它。
但是由于某些未知的原因，每当我尝试验证属性为must-match的字段时，页面在我尝试过的所有浏览器中都会完全冻结。
对不起，代码相当庞大，但我不知道在哪里修剪它……
Register.html：
<!--email--->
<div class="form-control">
<label>Email</label>
<input type="email" value="{$old_email|default:''}"
placeholder="Enter your email" name="email"
class="{if isset($smarty.session.errors.email)} invalid{/if} test"
data-required="required"
data-valid-email="on" data-validate="1" data-validate-on-focusout="1"
data-validate-on-input="1">
<small class="error-vmsg"></small>
<small class="text-muted">We never share your email with third-parties</small>
</div>
<!--username-->
<div class="form-control">
<label>Username</label>
<input type="text" value="{$old_username|default:''}"
placeholder="Enter your username" name="username"
class="{if isset($session.errors.username)} invalid{/if}"
data-required="required"
data-validate="1" data-validate-on-focusout="1" data-validate-on-input="1">
</div>
<!--password-->
<div class="form-control">
<label>Password</label>
<input id="password" type="password"
placeholder="Enter your password" name="password"
class="" data-validate="" min-length="8">
</div>
<!--password confirm-->
<div class="form-control">
<label>Confirm Password</label>
<input must-match="#password" type="password"
placeholder="Enter your password" name="pass_confirm"
class="{if isset($smarty.session.errors.password)} invalihd{/if}">
</div>
Here:
Form.js：
var submitBtn = document.getElementById("submit");
var form = document.getElementById("form");
inputs = document.getElementsByTagName("input");
var email_regexp = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var error_msg_class = "validation-error";
var error_elem_type = "div";
var error_msgs ={
required: ' %s field is required',invalid_email:"Please enter a valid email",min_length : " %s must be atleast %d %s in length",not_matching: '%s field and %s field don\'t match'
};
// alert(sprintf('hey %s hhh','Tito'));
var event_types = ["focusout","input","change"];
//alert(validateInput(inputs[3],1));
var errors=[];
toggledisabledBtnForFormValidity();
/*
inputs.forEach(function(){
alert("heu");
});
*/
/*
* When the form is to be submitted
*/
form.onsubmit = function(e){
// e.preventDefault();
// alert(validateForm());
if(validateForm(1)){ form.submit();}
else{ return false;}
}
/*
* Add error msg divs to all inputs with 'validate' attrivute
*/
for(i=0;i<inputs.length;i++){
var input = inputs[i];
var error_elem = document.createElement(error_elem_type);
error_elem.className = error_msg_class;
input.parentNode.insertBefore(error_elem,input.nextSibling);
}
/* listen for input event
*/
addEventListenerMulti(document,event_types,function(e){
validateOnEvent(e,e.type);
});
function addEventListenerMulti(element,events,listener) {
//var events = eventNames.split(' ');
for (var i=0,iLen=events.length; i<iLen; i++) {
element.addEventListener(events[i],listener,false);
}
}
function validateOnEvent(e,event_name){
var target = e.target;
//alert(target.hasAttribute('data-validate'));
if(target.hasAttribute('data-validate') && target.hasAttribute('data-validate-on-'+event_name)){
var input = target;
// alert("validating "+input.name);
validateInput(input,1);
toggledisabledBtnForFormValidity();
}
}
function toggledisabledBtnForFormValidity(){
if(validateForm(0)){
submitBtn.className = submitBtn.className.replace(/\bdisabled\b/g,"");
}
else{
submitBtn.className = submitBtn.className + " disabled";
}
}
function validateForm(show_errors){
var all_are_valid = true;
// alert(inputs);
for(i=0;i<inputs.length;i++){
var input = inputs[i];
if(!validateInput(input,show_errors)) { all_are_valid = false; }
}
return all_are_valid;
}
//alert(sprintf(["hey %s and %s","Tito","Loshe"]));
function add_error(args){
//e.g add_error("%s does not match %s",[],input.name,to_match.name")
// sprintf("%s does not match %s,to_match.name)
// alert(errors_arr);
//alert(args);
// var args = Array.prototype.slice.call(arguments);
// alert("args is "+args);
// error_msg = args.shift();
error_msg = args.shift();
// alert("error_msg is "+error_msg);
sprintf_vals = args;
// alert("sprintf args is "+sprintf_vals);
args.unshift(error_msg);
// alert(" new args is "+args);
var formatted_str = sprintf(args);
// alert("Formatted str is "+formatted_str);
errors.push(formatted_str);
// alert(errors);
}
//add_error(["%s and %s must be equal","amount","tobe"]);
function capitalizefirstLetter(string) {
return string.charat(0).toupperCase() + string.slice(1);
}
function validateInput(input,show_errors){
// alert(input.attributes[0]);
//var errors =[];
errors=[];
input.name = capitalizefirstLetter(input.name);
//required
if(input.hasAttribute("data-required") && input.value.trim() == ""){
// alert(input.name);
//
add_error([error_msgs.required,input.name]);
// error(error_msgs.required,input.name);
}
//VALID EMAIL
if(input.hasAttribute("data-valid-email") && !email_regexp.test(input.value.trim())){
add_error([error_msgs.invalid_email,input.name]);
// alert("ok2");
}
//NATIVE
if(!input.checkValidity()){
// alert(input.reportValidity());
}
//MIN LENGTH
if(input.hasAttribute("min-length") && parseInt(input.value.trim().length) < parseInt(input.getAttribute("min-length")) ){
//errors.push(input.name+ " must be atleast "+input.getAttribute("min-length"));
add_error([error_msgs.min_length,input.getAttribute("min-length"),input.getAttribute("data-type") == "digit" ? 'digits' : 'characters'
] );
// alert("");
}
//MATCHES ANOTHER
if(input.hasAttribute("must-match")){
var to_match = document.querySelector(input.getAttribute("must-match"));
if(to_match == undefined) {console.log("No element "+input.getAttribute("matches"));}
else{
if(to_match.value != input.value){
add_error([error_msgs.not_matching,to_match.name,input.name]);
}
}
}
//errors.push(input.name+ " must be atleast "+input.getAttribute("min-length"));
/*
errors.push(sprintf(
error_msgs.not_matching,"test"
// input.getAttribute("data-type") == "digit" ? 'digits' : 'characters'
));*/
//ar attrs = input.attributes;
/*
for(i=0;i<attrs.length;i++){
var attr = attrs[i];
//e.g data-minlength-8
// alert(attr.split('-'));
}*/
var no_of_errors = errors.length;
if(show_errors){
//if there is an element to shiw the error messages
if(input.parentNode.getElementsByClassName(error_msg_class)[0]){
var error_elem = input.parentNode.getElementsByClassName(error_msg_class)[0];
error_elem.innerHTML = errors[0] != undefined ?
errors[0]
: "";
}
//error_elem.style.color = "red";
//input.parentNode.insertBefore(error_elem,input.nextSibling);
//alert(error_elem);
/*
//Show the errors
for(i=0;i<errors.length;i++){
var error = errors[i];
var error_elem = document.createElement("
alert(error);
}*/
if(no_of_errors == 0){
// alert("no error")
//input.style.borderColor = "green";
input.className = input.className.replace(/\binvalid\b/g,"valid");
}
else{
input.className = input.className.replace(/\binvalid\b/g,"")+" invalid";
input.className = input.className.replace(/\bvalid\b/g,"");
// alert("ERROR for "+input.name);
}
}
//alert(':::::');
return no_of_errors == 0;
// alert('***');
}
function sprintf(args) {
//var args = arguments,string = args[0],i = 1;
return string.replace(/%((%)|s|d)/g,function (m) {
// m is the matched format,e.g. %s,%d
var val = null;
if (m[2]) {
val = m[2];
} else {
val = args[i];
// A switch statement so that the formatter can be extended. Default is %s
switch (m) {
case '%d':
val = parseFloat(val);
) if (isNaN(val)) {
val = 0;
}
break;
}
i++;
}
return val;
});
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）