jQuery를 폼을 제출

Question

HTML 코드

<div id="signup"> 
    <form id="suform" method="POST" action="roma/roma"> 
     <p> 
      <label>Frist Name</label> 
      <input type="text" id="sufName"/> 
      <span class="errorMessage"></span> 
     </p> 
     <p> 
      <label>Last Name</label> 
      <input type="text" id="sulName"/> 
      <span class="errorMessage"></span> 
     </p> 
     <p> 
      <label>Email</label> 
      <input type="text" id="suEmail"/> 
      <span class="errorMessage"></span> 
     </p> 
     <p> 
      <label>Mobile Number</label> 
      <input type="text" id="suMNumber"/> 
      <span class="errorMessage"></span> 
     </p> 
     <p> 
      <label>Password</label> 
      <input type="password" id="suPassword"/> 
      <span class="errorMessage"></span> 
     </p> 
     <p> 
      <label>Re Password</label> 
      <input type="password" id="suRePassword"/> 
      <span class="errorMessage"></span> 
     </p> 
     <p> 
      <input type="submit" class="button" value="sign up"/> 
     </p> 
    </form> 
</div> 

그것을 가입 페이지 를 만들기 위해 단 6 입력 필드이며,이없이 입력 필드 빈이 있는지 확인하기 위해 jQuery 코드이며, 만약이 입력란이 비어 있습니다. 양식을 제출하고 싶습니다.

jQuery 코드

$(document).ready(function(){ 
    $('#suform').on('submit', function(e){ 
     e.preventDefault(); 
     var errorCount = 0; 
     $('span.errorMessage').text(''); // reset all error mesaage 
     $('input').each(function(){ 
      var $this = $(this); 
      if($this.val() === ''){ 
       var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label 
       $this.next('span').text(error); 
       errorCount = errorCount + 1; 
      } 
     }); 
     if(errorCount === 0){ 
      $(this).submit(); // submit form if no error 
     } 
    }); 
}); 

코드없이 입력 필드 빈이 있는지 확인, 그것은 비어있는 다음 오류 메시지가 제출해야, 다른 나타나지만 작동하지 않습니다 제출 발견했다.

code

Answer 1

것은 $(this)[0].submit();를 사용해보십시오. $ (this)를 사용하는 것은 폼에 대한 jQuery 객체 참조를 참조합니다. 나는 jQuery의 submit() 메서드가 실제로 무엇을하는지 모르지만, 분명히 은 양식을 제출하지 않습니다. $(this)[0]을 사용하면 실제 DOM 요소를 참조하며, 이는 사용자가 찾고있는 표준 DOM 제출 메서드를 사용합니다.

이미 알고 계실지 만 서버 및 클라이언트 측 유효성 검사를 사용해야합니다. 일부 사용자에게는 JS가없고 일부 사용자는 의도적으로 양식을 변경하기 때문입니다. 그냥 빨리 "잊지 마라"!

Answer 2

당신은 e.preventDefault()를 제거하고 return INSEAD 사용할 수 있습니다

$('form').on('submit', function(e){ 
    var errorCount = 0; 
    $('span.errorMessage').text(''); 
    $('input').each(function(){ 
     var $this = $(this); 
     if($this.val() === ''){ 
      var error = 'Please fill ' + $this.prev('label').text(); 
      $this.next('span').text(error); 
      errorCount = errorCount + 1; 
     } 
    }); 
    return errorCount === 0; 
}); 

DEMO :http://jsfiddle.net/h9njC/27/

Answer 3

체크 아웃 jQuery validation plugin합니다. 이를 위해 당신이 필요합니다 모든 입력 필드의 class = "required"을 추가하고, 단지에 validation 전화 :

$('form').validation({ 
    // any options you want 
}); 

그것은 것 또한 수행 등의 조건 검증을하고,

Answer 4

$('form').on('submit',function(e){ 
    var errorCount = 0; 
    $('span.errorMessage').text(''); 
    $('input').each(function(){ 
     var $this = $(this); 
     if($this.val() === ''){ 
      var error = 'Please fill ' + $this.prev('label').text(); 
      $this.next('span').text(error); 
      errorCount = errorCount + 1; 
     } 
    }); 
    if(errorCount === 0){ 
     alert('done'); // just an alert to notice when everything OK [remove it] 
     $this.submit(); // submit the form on success 
    } else e.preventDefault(); // halt the submission on default 
    }); 

를 오류 메시지를 표시하는 등의 편리한 것들

DEMO