js를 사용한 간단한 폼 유효성 검사

Question

매우 간단한 폼 유효성 검사를 동적으로 수행하려고합니다.

<div class="name"> 
    <p>Your Name</p> 
    <input name="name" type="text" required> 
    <span class="validation">You must enter your name</span> 
</div> 

하는 방법 자바 스크립트를 사용하여 : "/ 집중 클릭"그것을 채우지 않고 멀리 클릭하면 다음 "필요한"으로 입력을 찾아서이 범위를 바로 찾을 작성해야합니다 여기

는 필드 그 후에 필드가 채워질 때까지 보여줍니다.

예를 들어 많은 방법을 시도했습니다.

event.preventDefault(); 

    var success = true; 

    $('#namevalidation').hide(); 
    $('#emailvalidation').hide(); 
    $('#messagevalidation').hide(); 

    if($('#name').val()=='') { 
    $('#namevalidation').show(); 
    success = false; 
    } 
    if(!IsEmail($('#email').val())) { 
    $('#emailvalidation').show(); 
    success = false; 
    } 

if($('#message').val()=='') { 
    $('#messagevalidation').show(); 
    success = false; 
} 

은 내가 실제로 원하는 것입니다이 솔루션을 발견 : http://jsfiddle.net/trixta/XqPhQ/ 것은이를, 나는 $.webshims 수단 ... 그것은 무엇을 사용합니까 무슨 생각이 없다? Jquery 야?

Answer 1

<style> 

.error{ 
    background-color: #ffffdd; 
    border: 1px solid #cacaca; 

} 
body{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
} 
.valerr{ 
    color: #D8000C; 
    border: 1px solid #872429; 
    border-radius: 4px; 
    background-image: url('error.png') ; 
    background-repeat: no-repeat; 
    background-position: 3px 1px; 
    background-color: #FFCCB9; 
    padding: 3px 3px 1px 25px; 
    margin-top: 5px; 
} 

var FormValidation = function(form){ 


     this.messages = { 

      required : 'This field should not be empty', 
      email  : 'Please enter valid email', 
      number  : 'Please enter valid number', 
      min   : 'This field length should be minimum ', 
      max   : 'This field length should not exceed ', 
      range  : 'This field length between ' 
     }; 

     validator = this; 

     var currentmsg =this; 

     this.required = function(value){ 
      var valid = (value.length > 0); 
      return {status: valid, message: valid ? '' : currentmsg.messages.required}; 
     } 

     this.email = function(value){ 
      var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/ ; 
      var valid = pattern.test(value); 
      return { status:valid, message: valid ? '' : currentmsg.messages.email}; 
     } 

     this.number = function(value){ 
      var pattern = /^[0-9]+/ ; 
      var valid = pattern.test(value); 
      return { status:valid, message: valid ? '' : currentmsg.messages.number}; 
     } 

     this.min = function(value,args){ 
      if(value.length > 0){ 
       var valid = (value.length >= args[0]) 
       return { status:valid, message: valid ? '' : currentmsg.messages.min + args[0] }; 
      } 
     } 

     this.max = function(value,args){ 
       if(value.length > 0){ 
        var valid = (value.length <= args[0]) 
        return { status:valid, message: valid ? '' : currentmsg.messages.max + args[0] }; 
       } 
      } 

     this.range = function(value,args){ 
      var valid = (value.length >= args[0] && value.length <= args[1]) 
      return { 
       status:valid, 
       message: valid ? '' : currentmsg.messages.range + args[0] + ' and ' + args[1] 
       }; 
     } 

     this.validators = { 
      required : validator.required, 
      email : validator.email, 
      number : validator.number, 
      range : validator.range, 
      max  : validator.max, 
      min  : validator.min 
     }; 

     this.validate = function(form){ 
      var elements = form.elements; 
      var status = true; 
      for(var i = 0; i < elements.length ; i++){ 
       var validate = elements[i].getAttribute('validate'); 
       if(!validate){  
        continue; 
       } 
       var types = validate.split(' '); 
       for(var j = 0; j < types.length; j++){ 
        var result = this.validateField(elements[i], types[j]); 
        if(!result) { 
         continue 
        } 
        this.displayErrors(elements[i], result); 
        if(!result.status) {        
         status = false; 
         break; 
        } 
       } 
      } 
      return status; 
     } 

     this.displayErrors = function(element, result){ 
      element.className = result.status ? '' : 'error'; 
      var elErr =element.errorMsg; 
      if(elErr!=null) 
       elErr.className = result.status ? '' :'valerr' 
       if(!element.errorMsg){ 
        elErr = document.createElement("div"); 
        elErr.id = 'valerr'; 
        element.parentNode.appendChild(elErr); 
        element.errorMsg = elErr; 
       } 
      elErr.innerHTML = result.message; 
     } 

     this.validateField = function (element, type){ 
      var validationType = type; 
      var args ; 
      if(type.indexOf("(")!= -1 && type.indexOf(")") != -1){ 
       var result = this.getArguments(type); 
       validationType = result.type; 
       args = result.argsList; 
      } 
      validator = this.validators[validationType]; 
      if(validator != null){ 
       return validator(element.value ,args); 
      } 
      return null; 
     } 

     this.getArguments = function(type){ 
      var validationtype = type.substring(0,type.indexOf("(")); 
      var args = type.substring(type.indexOf("(")+1,type.indexOf(")")).split(','); 
      return { type : validationtype, argsList : args} 
     } 

     this.init = function() { 
      var curForm = this; 
      var forms = document.forms; 
      for(var i = 0; i < forms.length ; i++){ 
       if(forms[i].getAttribute('validate')!=null){ 
        forms[i].onsubmit = function(){ 
         return curForm.validate(this); 
        }; 
       } 
      }  
     } 
} 

window.onload = function() {   
    var formValidation = new FormValidation(); 
    formValidation.init(); 
} 
</script> 
<form method="post" action="#" validate> 

    <table> 
     <tr> 
      <td>Name :</td> 
      <td><input type="text" name="" validate="required min(5)"></td> 
     </tr> 
     <tr> 
      <td>Mobile No :</td> 
      <td><input type="text" name="" validate="required number min(10) max(10)"> 
     </tr> 
     <tr> 
      <td>Email :</td> 
      <td><input type="text" name="" validate="required email"></td> 
     </tr> 
    </table> 
    <input type="submit" value="submit"/> 
</form> 

Answer 2

Answer 3

이

을 시도 코드에서

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 

을 포함하십시오

$(':required').change(function() 
{ 
    if($.trim($(this).val())==''){$(this).next().val('You must enter your name')}else{$(this).next().val('')} 
}) 

및

는

$(':required').blur(function() 
{ 
    if($.trim($(this).val())==''){$(this).next().val('You must enter your name')}else{$(this).next().val('')} 
}) 

Answer 4

난 그냥 필요한 속성을 사용하고에 대해 확인합니다. 또한 사용자 지정 특성 "typeof = 'date | time | int'"데이터 형식의 유효성을 검사 할 수 있습니다. 양식 제출을 허용하기 전에 양식 필드를 통해 반복하고 필요한 경우 true이지만 값이 없으면 오류가 발생합니다. 유효한 데이터의 데이터 유형을 확인하십시오. 나는 보통 title 애트리뷰트에 에러 메시지를 넣고 .tooltip()을 수행하여 에러를 표시한다.

$('input, select, textarea').each(function(){ 
    var $this = $(this); 
    if ($this.prop('required') == 'true' && $this.val() == '') { 
     alert('error') 
    } 
    // date validations here 
}); 

난 그냥 우리의 데이터는 특별한 검증이 필요하기 때문에 내 사용자 지정 솔루션을 사용하는 것을 선호뿐만 아니라 항상 JQuery와 유효성 검사 플러그인이있다.