Question

在jquery插件中，它应该能够直接验证，但我找不到解决方案。

我检查：http://jqueryvalidation.org/documentation但在那里找不到答案。

如果某个字段为空，则应说“必需”。但在我的情况下，我必须填写一些文本，转到另一个字段并返回到原始字段，然后在删除仍在那里的文本后我得到“必需”。

这是默认情况下还是可以更改此行为？

链接：http://www.volunteeringnews.com/，然后在组织＆gt;下;提交

这是我的代码：

<?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在
在模糊上验证元素（复选框/单选按钮除外）。如果没有输入，所有规则都被跳过，除非字段是已被标记为无效。

只需将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

HTML表单上的实时验证，Jquery插件

1 个答案: