JQuery проверить, только если выбран определенный переключатель - PullRequest
Новая
       17

JQuery проверить, только если выбран определенный переключатель

2 голосов
/ 05 ноября 2011

это мой первый пост здесь, и я супер любитель всего этого, поэтому, пожалуйста, потерпите меня.Я уже посмотрел: jQuery проверять, только если выбрана определенная радиокнопка и многие посты связаны людьми, отвечающими на эти посты.Я чувствую, что у меня все правильно, но это просто не работает.

У меня есть базовая форма контакта, которая позволит пользователям либо оставлять отзывы, запрашивать информацию или запрашивать услуги.Я хотел бы, чтобы поле «Адрес» было обязательным только в том случае, если будет заказ / запрос на обслуживание.Прямо сейчас я ничего не могу выяснить, чтобы сделать «Адрес» обязательным, если не заменить условный оператор «требуется:« ConReas_1: флажок »« на «требуется: истина».Идентификатор этой конкретной радиокнопки: «ConReas_1»

HTML: 

...<td><label for="Address">Address: </label> 
    <input name="Address" type="text" id="Address" value="Street Address Including Apt. # if applicable." /></td>...

      ...<table width="600">
        <tr><td colspan="2"><label id="CRlabel">Reason for contact:</label></td></tr>
        <tr>
          <td width="189"><label>
            <input type="radio" name="ConReas" value="InfoReq" id="ConReas_0" onclick="OrderYN()"/>
            Request Info</label></td><td width="399"></td>
        </tr>
        <tr>
          <td><label>
            <input type="radio" name="ConReas" value="ServReq" id="ConReas_1" onclick="OrderYN()" />
            Order / Request Services</label></td><td></td>
        </tr>
        <tr>
          <td><label>
            <input type="radio" name="ConReas" value="WebFB" id="ConReas_2" onclick="OrderYN()" />
            Website Feedback</label></td><td></td>
        </tr>
        <tr>
          <td><label>
            <input type="radio" name="ConReas" value="GenFB" id="ConReas_3" onclick="OrderYN()" />
            General Feedback</label></td><td></td>
        </tr>
      </table>...

Javascript: 

//Custom rules for form validation
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value != param;
}, "Please enter your correct info.");

//Form Validation
$(document).ready(function(){
$("#contact").validate({
    rules: {
        Fname: {
            required: true,
            minlength: 2,
            notEqual: "First Name"
        },
        Lname: {
            required: true,
            minlength: 2,
            notEqual: "Last Name"
        },
        Email: {
            required: true,
            email: true,
            notEqual: "name@example.com"
        },
        EmConf: {
            required: true,
            email: true,
            equalTo: "#Email",
            notEqual: "name@example.com"
        },
        ConReas: {
            required: true
        },
        Comment: {
            required: true,
            minlength: 20,
            notEqual: "Enter your comment, feedback, or question here."
        },
        Address:{
            required: "#ConReas_1:checked",
        },
        City:{
            required: true,
            notEqual: "City"
        },
        State:{
            required: true,
        },
        Zip:{
            required: true,
            notEqual: "XXXXX"
        }
    },debug:true,
    messages: {
        EmConf: {
            equalTo: "Both Email fields must match."
        },
        ConReas: {
            required: "You must select a contact reason."
        },
        Comment: {
            notEqual: "Please enter your comment, feedback or question below."
        },
        State: {
            required: "Please select your state."
        }
    },
    errorPlacement: function(error, element) { 
        if ( element.attr("name") == "ConReas" ) 
            error.insertAfter("#CRlabel");
        else if (element.attr("name") == "Comment" )
            error.insertAfter("#cmtlbl");
        else
            error.insertAfter(element);
    }
});
$("#ConReas_01").click(function() {
    $("#Address").valid();
});
$("#ConReas_1").click(function() {
    $("#Address").valid();
});
$("#ConReas_2").click(function() {
    $("#Address").valid();
});
$("#ConReas_3").click(function() {
    $("#Address").valid();
});
});

Заранее благодарим за любую предоставленную помощь.Эти форумы были Божьей посылкой в ​​обучении веб-дизайну.

...