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

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

我查了一下：但在那里找不到答案

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

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

链接：然后在组织>提交下

这是我的代码：

<?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>

$（函数（）{
$（“#提交”）。单击（函数（）{
$.ajax({
url:'osb.php'，
键入：“POST”，
数据：$（'#form1'）。序列化（），
成功：功能（结果）{
$（“#响应”）.remove（）；
$（“#容器”）.append（“
”+result+”
”）；
$（'加载'）.fadeOut（500）；
}
});         
});
});
在下面填写您的信息




基本信息


名称*


大陆*非洲美洲亚洲澳大利亚欧洲


国家*


网站


电子邮件*



组织详细信息


组织*


类别


每周价格*
欧元兑英镑


说明*


通缉犯*


期望值*


额外的


$（文档）.ready（函数（）{
调试：真；
$（“#表格1”）。验证({
规则：{
'name'：{required:true}，
'country'：{required:true，}，
'email'：{required:true，email:true}，
'网站'：{url:true}，
'nameorg'：{required:true，}，
'price'：{required:true，number:true}，
'description'：{required:true，}，
'通缉'：{required:true，}，
'预期'：{required:true}
},
信息：{
“名称”：“必需”，
},
submitHandler:函数（表单）{
警惕（‘很好’）；
返回false；
}
});
});

您可以使用

onfocusout

参数来实现这一点

根据：

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
 });

---

根据此处的文档：

是否希望在用户与字段交互之前显示错误？请更清楚地回答您的问题。@Axel我想要一条消息，说明如果有人单击某个字段并将其保留为空，则该字段是必需的。我使用另一个代码（）修复了此问题，因为我使用您的代码时出错。有，找不到加载元素。无论如何，谢谢你的关注！