Блог

Я взламывал базовый механизм проверки формы.Пока все так … не очень хорошо.Я смог «завершить» это.

Но по какой-то неизвестной причине, каждый раз, когда я пытаюсь проверить поле с атрибутом must-match , страница полностью зависает во всех браузерах, которые я пробовал.

Я понятия не имею, что происходит. Я хотел бы создать короткий фрагмент, но редактор spnippet не поддерживает сенсорные устройства

Извините, код довольно громоздкий, но я понятия не имею, где его так обрезать…

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') amp;amp; 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(/bdisabledb/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,input.name,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") amp;amp; 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") amp;amp; !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") amp;amp; 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.name,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,input.name,"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(/binvalidb/g, "valid");
        }
        
        else{
            
            input.className = input.className.replace(/binvalidb/g,"") " invalid";
            input.className = input.className.replace(/bvalidb/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;
    });
}