logo标签列表

jQuery验证 - 如果选择了一个选项，则使下一个选项不是必需的？

jqueryvalidationplugins
8

我是一个完全的新手，对所有东西都很陌生，基本上是通过教程来理解的。我正在使用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;
    }
  });
});
1个回答
8
谢谢你，这个有很陡峭的学习曲线。我想我需要加一个闭括号，因为没有它就无法验证任何内容。 coderules: { response_type: { required: true, }, contact_time: { depends: function () { return $('#askquestion select[name="response_type"]').val() === 'Phone'; } } } code它忽略了response_type和contact_time的required值。 - Finding Mozart
1
@FindingMozart，是的，当然，抱歉，该对象需要正确关闭。我已编辑我的答案以添加缺少的括号。谢谢。 - Derek Henderson
感谢你提供的帮助，正如我所说，我是一个完全的新手，我理解了你提供的代码并正在尝试学习，希望你不介意我进一步寻求帮助。现在，如果选择响应类型中的电子邮件，则该表单不需要验证contact_time，这很好，这正是我想要的。然而，在表单中选择电话似乎会破坏表单，并在本地非服务器环境下抛出php页面。我是否漏掉了什么？我猜它知道需要填写电话，但不知道当选择电话时该怎么做？ - Finding Mozart
在服务器环境中，它只是将表单发送到电子邮件，目前PHP正在捕获基本输入字段而未经验证。 - Finding Mozart
解决了！我现在感觉非常有成就感（尽管有点傻）。因为我使用的HTML表单是：<option value="" selected="selected">--请选择--</option> 错误没有被触发。所以加入一个“input type="hidden"”就可以触发它了！ - Finding Mozart
依赖函数：function (e) { return $(e).closest('form').find('select[name="response_type"]').val() === 'Phone' ; }如果您想使用多个表单或动态表单，其中可能不使用ID。 - mlimon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接