Проверка в реальном времени, плагин JQuery на HTML-форме

Question

В плагине jquery он должен быть способен проверять напрямую, но я не могу найти решение.

Я проверяю: http://jqueryvalidation.org/documentation, но не нашел ответа там.

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

Это по умолчанию или я могу изменить это поведение?

Ссылка: http://www.volunteeringnews.com/, а затем при организации> представить

Это мой код:

<?php include("osb.php");?> 
<script type = "text/javascript"> 
$(function(){ 




$('#submit').click(function(){ 



$.ajax({ 

     url: 'osb.php', 
     type: 'POST', 
     data: $('#form1').serialize(), 
     success: function(result){ 
      $('#response').remove(); 
      $('#container').append('<p id = "response">' + result + '</p>'); 
      $('#loading').fadeOut(500); 

      } 

    });   

}); 
}); 

</script> 

<h1>Fill in your information below</h1 ><br><br> 
<a id="nw" href="#">Need help?</a> 

<form action='osb.php' method='post' id="form1"> 
<div id = "container"> <br> 

    <h3>Basic Information</h3><br><br> 
    <label><strong>Name <font color="red">*</font>   </strong></label>   <input type='text' id="name" name='name' /><br><br> 
    <label><strong>Continent <font color="red">*</font>  </strong></label>   <select id="continent" name="continent"><option>Africa</option><option>America</option> <option>Asia</option><option>Australia</option><option>Europe</option></select><br><br> 
    <label><strong>Country <font color="red">*</font>  </strong></label> <input type='text' id="country" name='country' /><br><br> 
    <label><strong>Website         </strong></label> <input type='text' id="website" name='website' /><br><br> 
    <label><strong>E-mail <font color="red">*</font>  </strong></label> <input type='text' id="email" name='email' /><br><br><br> 
    <h3>Organisation details</h3><br><br> 
    <label><strong>Organisation <font color="red">*</font> </strong></label> <input type='text' id="nameorg" name='nameorg' /><br><br> 
    <label><strong>Category         </strong></label> <input type='text' id="category" name='category' /><br><br> 
    <label><strong>Price per week <font color="red">*</font> </strong></label> <input type='text' id="price" name='price' /> 
    <select id ="currency" name="currency" > <option> EUR </option> <option> DOL </option> <option> GBP </option></select><br><br> 
    <label><strong>Description <font color="red">*</font> </strong></label> <textarea id="description" rows="5" cols="40" placeholder="Describe your organisation" name='description'/></textarea><br><br> 
    <label><strong>Wanted <font color="red">*</font>  </strong></label> <textarea id="wanted"  rows="5" cols="40" placeholder="Describe what kind of volunteer is welcome" name='wanted'/></textarea><br><br> 
    <label><strong>Expectation <font color="red">*</font> </strong></label> <textarea id="expectation" rows="5" cols="40" placeholder="Describe what a volunteer can expect"  name='expectation'/></textarea><br><br> 
    <label><strong>Extra          </strong></label> <textarea id="extra"   rows="5" cols="40" placeholder="Extra details"        name='extra'/></textarea><br><br> 

    <input type='hidden' name='action' value='create' /> 
    <input type='button' value='Submit' id="submit"/> 
    <input type="reset" value="Reset" class="reset-org"> 

    <a href='index.php'>Back to index</a> 
</div> 
</form> 

    <script> 

$(document).ready(function() { 
    debug:true; 


    $("#form1").validate({ 


    rules: { 
     'name':   {required: true}, 
     'country':  {required: true,}, 
     'email':  {required: true, email: true}, 
     'website':  {url: true}, 
     'nameorg':  {required: true,}, 
     'price':  {required: true, number: true}, 
     'description': {required: true,}, 
     'wanted':  {required: true,}, 
     'expectation': {required: true} 
    }, 



    messages: { 
     'name': "Required", 
    }, 



     submitHandler: function (form) { 
     alert('is good'); 
     return false; 


    } 

}); 

}); 
</script> 





<script src="js/navigation.js"></script> 

Answer 1

Вы можете использовать параметр onfocusout для достижения этой цели.

На основе jQuery Validation Plugin Documentation:

onfocusout
Validate элементы (за исключением флажков/переключателей) на размытие. Если ничего не введено, все правила пропускаются, за исключением случаев, когда поле уже отмечено как недействительное.

Просто добавьте onfocusout: true к вашим параметрам проверки.

$("#form1").validate({ 
    rules: { 
     'name':   {required: true}, 
     'country':  {required: true,}, 
     'email':  {required: true, email: true}, 
     'website':  {url: true}, 
     'nameorg':  {required: true,}, 
     'price':  {required: true, number: true}, 
     'description': {required: true,}, 
     'wanted':  {required: true,}, 
     'expectation': {required: true} 
    }, 
    messages: { 
     'name': "Required", 
    }, 
    submitHandler: function (form) { 
     alert('is good'); 
     return false; 
    }, 
    onfocusout: true 
}); 

На основе документации здесь: http://jqueryvalidation.org/validate/#options