【问题标题】:jQuery validate - if an option is selected make the next option not required?jQuery validate - 如果选择了一个选项,则不需要下一个选项?
【发布时间】:2013-03-08 13:12:07
【问题描述】:

我是一个完整的菜鸟,基本上按照教程了解所有内容,我正在使用 jQuery 表单插件

我正在尝试制作一个选择“联系类型”的表单,如果选择“电话”选项,则需要“联系时间”,但如果选择“电子邮件”,则不需要“联系时间”。

*html格式。*

<form id="askquestion" action="questionprocess.php" method="post">

                <td><label for="response type">Method of contact:</label></td>
                <td><select name="response_type"> 
                    <option value="" selected="selected">-- Please select --</option>

                    <option value="Phone">Phone</option>
                    <option value="Email">Email</option>
                    </select></td>
                    </tr>

                    <td><label for="response time">Best time to contact:</label></td>
                <td><select name="contact_time"> 
                    <option value="" selected="selected">-- Please select --</option>
                    <option value="morning_noon">Morning to Noon</option>
                    <option value="noon_afternoon">Noon to afternoon</option>
                    <option value="evenings">Evenings</option>
                    </select></td>
                    </tr>


        </form>

jQuery 规则:

$(function() {
    // Validate the contact form
  $('#askquestion').validate({
    // Specify what the errors should look like
    // when they are dynamically added to the form
    errorElement: "label",
    wrapper: "td",
    errorPlacement: function(error, element) {
        error.insertBefore( element.parent().parent() );
        error.wrap("<tr class='error'></tr>");
        $("<td></td>").insertBefore(error);
    },

    // Add requirements to each of the fields
    rules: {

        response_type: {
            required:true,
        },


        contact_time: {
            required:true,
        },

更新。这就是验证表单的结束方式。

// Use Ajax to send everything to form processing file
    submitHandler: function(form) {
        $("#send").attr("value", "Sending...");
        $(form).ajaxSubmit({
            success: function(responseText, statusText, xhr, $form) {
                $(form).slideUp("fast");
                $("#response").html(responseText).hide().slideDown("fast");
            }
        });
        return false;
    }
  });
});

【问题讨论】:

    标签: jquery validation plugins


    【解决方案1】:
    rules: {
        response_type: {
            required: true,
            contact_time: {
                depends: function () {
                    return $('#askquestion select[name="response_type"]').val() === 'Phone';
                }
            }
        },
    

    在文档中:http://docs.jquery.com/Plugins/Validation/validate#code

    【讨论】:

    • 谢谢,这有一个陡峭的学习曲线,我想我需要一个右括号,因为它不会验证任何东西。 coderules: { response_type: { required: true, }, contact_time: {depends: function () { return $('#askquestion select[name="response_type"]').val() === 'Phone' ;code 它忽略了 response_type 和 contact_time 所需的值。
    • @FindingMozart,是的,当然,抱歉,对象需要正确关闭。我已经编辑了答案以添加缺少的括号。谢谢。
    • 感谢您提供的帮助,就像我说的,完整的菜鸟,我理解您提供的代码并尝试学习,希望您不介意我进一步寻求帮助。现在,如果选择了 response_type 中的电子邮件,则表单不需要验证 contact_time——这很好,我想要的。但是,在表单中选择电话似乎会破坏表单并且(在本地非服务器环境中)抛出 php 页面。有什么我想念的吗?我猜它知道 phone 是必需的,但不知道当它被选中时该怎么办?
    • 在服务器环境中,它只是将表单发送到电子邮件,此时 php 正在捕获未验证的基本输入字段。
    • 解决了!我现在感觉很完美(虽然有点愚蠢)。因为我的 html 表单我使用了 错误没有触发。所以输入“input type="hidden" 会触发它!
    猜你喜欢
    • 1970-01-01
    • 2017-12-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-12
    • 1970-01-01
    • 2015-01-01
    • 1970-01-01
    相关资源
    最近更新 更多