使用 jQuery 表单规则显示文本框时验证文本框

Posted 2023-05-08

【中文标题】使用 jQuery 表单规则显示文本框时验证文本框

【英文标题】：Validating textbox when it was shown using jQuery form rules

【发布时间】：2013-12-15 12:49:12

【问题描述】：

当用户在下拉列表中选择“其他”时，我有一个生成文本框的表单..

动态文本框生成完成，我可以获取“其他”文本框的值。

但我的问题是

1) 我想在显示其他文本框时对其进行验证..

请提供任何建议如何进行验证..

<form name="f2" id="f2" method="post" action="" enctype="multipart/form-data">
    Type:
    <select name="type"  id="type" onchange='CheckColors(this.value);'> 
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="others">others</option>
    </select>
    <input type="text" name="others" id="others" style='display:none;'/>
    <input type="submit" name="submit"/>
</form>

//这是验证表单的脚本..我想验证另一个文本框，当它出现时..怎么做？

<script type = "text/javascript">
$(document).ready(function () 
    $("#f2").validate(
        debug: false,
        rules: 
            type: 
                required: true
            ,
            others: 
                required: true
            ,
            messages: 
                //messages for required
            
        );
    ); 
</script>

我尝试了上述过程，但它总是并排显示两次所需的文件。

【问题讨论】：

你是如何创建动态文本框的？

【参考方案1】：

试试这个

$(document).ready(function () 
  $("#f2").validate(
    debug: false,
    rules: 
      type: 
        required: true
      ,
      messages: 
        //messages for required
      
    
  );
);  

function CheckColors(value) 
  if(value=='others') 
    $('#others').show().attr('required','required');
   else 
    $('#others').hide().removeAttr('required');
  

从验证函数中删除这一行，然后验证工作正常

others: 
   required: true

DEMO