Как показать сообщение об успешном завершении после валидации

Question

Я хочу ввести несколько полей, и я хочу показать сообщение об успешном завершении $ ('. Alert-success'). Show(); после ввода пользователем всех значений.
Я пробовал здесь jsfiddle Теперь я могу проверить все поля, но я не знаю, как показать сообщение об успешном завершении, если все поля не равны нулю.
Html:

<div class="contentContainer"> 
    <div class="alert alert-success hide">Form submitted successfully</div> 
         <div id="basicInfo"> 
          <div class="toggleContentInnerSec"> 
          <div class="row-fluid"> 
           <div class="span7"> 

           <label>First Name</label> <br> 
           <p class="hide firstNameErrorMsg error">Please enter first name</p> 
           <input type="text" name="borrowerBasicDetail.firstName" value="" id="addBorrowers_borrowerBasicDetail_firstName" class="access required" placeholder="Example: 'Sachin' " data-errormsg="firstNameErrorMsg"> <br> 
           <label>Last Name</label> <br> 
           <p class="hide lastNameErrorMsg error">Please enter last name</p> 
           <input type="text" name="borrowerBasicDetail.lastName" value="" id="addBorrowers_borrowerBasicDetail_lastName" class="access required" placeholder="Example: 'Tendulkar' " data-errormsg="lastNameErrorMsg"> <br> 
           <label>Date Of Birth</label> <br> 
           <p class="hide birthDayErrorMsg error">Please enter date of birth</p> 
           <input type="text" name="borrowerBasicDetail.age" value="" id="addBorrowers_borrowerBasicDetail_age" class="access required" placeholder="DD/MM/YYYY" data-errormsg="birthDayErrorMsg"> <br> 

          </div> 
         </div> 

         </div> 
         </div> 

         <div class="row-fluid pull-left"> 
          <div class="form-actions"> 
           <a class="btn btn-success btn-large" id="tabOneSubmit">Submit</a> 
          </div> 
         </div> 

        </div> 

Сценарий:

submit(); 

function submit(){ 
    $('#tabOneSubmit').click(function(){ 
     $('.required').each(function(){ 
      var element=$(this); 
      var elementVal=$(this).val(); 
      var errorMsgId=element.attr('data-errorMsg'); 
      if(elementVal==''){ 
       $('.'+errorMsgId).show(); 
       element.addClass('errorField'); 
      } 
      else{ 
       $('.'+errorMsgId).hide(); 
       element.removeClass('errorField'); 
       } 
     }); 

    }); 
} 

Answer 1

Вот решение, просто установить переменную состояния.

submit(); 

function submit(){ 
    $('#tabOneSubmit').click(function(){ 
     var status=true; 
     $('.required').each(function(){ 

      var element=$(this); 
      var elementVal=$(this).val(); 
      var errorMsgId=element.attr('data-errorMsg'); 
      if(elementVal==''){ 
       $('.'+errorMsgId).show(); 
       element.addClass('errorField'); 
       status=false; 
      } 
      else{ 
       $('.'+errorMsgId).hide(); 
       element.removeClass('errorField'); 
       } 
     }); 

     if(status) { 
      $('.alert-success').show(); 
     } 

    }); 
} 

Demo

Answer 2

Во-первых, с помощью валидатора это хорошая вещь, но я предлагаю вам проверить входы в стороне сервера тоже, потому что это легко взломать код JavaScript.

Во-вторых, вам нужно инкапсулировать, чтобы ваши поля ввода через;

<form method="POST or GET" action="foo.html"> </form>

Затем вы можете использовать JQuery представить() способ представить с помощью JavaScript:

$(form).submit(function(){ 
    $('.alert-success').show(); 
    event.preventDefault(); // if you want to send data only, do not reload page. 
}); 

$ (форма) может быть, как если форма имеет идентификатор или класс: $('.myForm') , $('#myForm')