Reciprocal Validation between select field and text field

[Rawrb]

(E-mailed you about this, reposting here as requested)

I'm running into a snag with extending its capabilities and was wondering if you could advise. I'm a PHP guy and not quite a jQuery master.

I have a dropdown in my for for cell phone carrier and another field for cell phone. The trick is, if they select a carrier and don't enter a phone number, I need to prompt them to enter a phone number. If they enter a phone number and don't select a carrier, I need to prompt them to select a carrier.

I have no idea how to get this to work with verify.js, and was wondering if you could provide a bit of insight on where to start.

[jpillora]

Give this a try:

$.verify.addRules({
  cellphone: function(r) {
    //pass validation if there is no carrier
    if(!$("#carrier").val()) {
      return true;
    }
    //perform cell validation here [Note: r.val() is a shortcut to $(element-being-validated).val() ]
    if(/^\d{10}$/.test(r.val())) {
      return "You must enter a valid cell-phone number"
    }
    //passed
    return true;
  }
});

Now, we can use it

<form>
  <select id="carrier">
    <!-- dropbox options -->
  </select>
  <input value="" data-validate="cellphone">
  <input type="submit" class="submit">
</form>

[Rawrb]

I appreciate you taking the time to help!

I did try it but the fields didn't get flagged when I entered a cellphone number and left the dropdown select alone, nor did it work when I selected a dropdown option with valid, non-blank data and left the phone number blank.

Here's what I did code-wise:

<div class="clear"></div>
<div id="home_email_list">
    <div id="container"> <!-- http://psychostick.com/listmessenger/public/listmessenger.php -->
        <form method="post" action="test.php" name="subscribeform" class="pure-form pure-form-aligned">
            <input type="hidden" name="group_ids[]" value="1" />
            <fieldset id="required_home">                   
                <div class="pure-control-group">
                    <input type="text" name="firstname" value="" placeholder="First Name" required>
                </div>
                <div class="pure-control-group">
                    <input type="text" name="lastname" value="" placeholder="Last Name" />
                </div>
                <div class="pure-control-group">
                    <input type="email" name="email_address" value="" placeholder="E-mail" required class="firstemail"> 
                </div>

                <div class="pure-control-group">
                    <input type="text" name="zipcode" maxlength="5" value="" placeholder="Zip Code" required data-validate="number">
                </div>
            </fieldset>
            <fieldset id="optional_home">
                    <div class="pure-control-group">
                        <input type="text" name="phone" maxlength="12" value="" placeholder="Cell Number" data-validate="cellphone">
                    </div>
                    <div class="pure-control-group">
                    <select name="carrier" id="carrier">
                        <option value="">Select Cell Carrier</option>
                        <option value="">--USA/Canada--</option> 
                        <option value="airtouch.net">Airtouch Pager</option> 
                        <option value="wirefree.informe.ca">Aliant/NBTel</option> 
                        <option value="message.alltel.com">Alltel</option> 
                        <option value="paging.acswireless.com">Ameritech (ACS)</option> 
                        <option value="txt.att.net">AT&amp;T</option> 
                        <option value="mmode.com">AT&amp;T mmode</option> 
                        <option value="txt.bellmobility.ca">Bell Mobility Canada</option> 
                        <option value="bellsouth.cl">Bellsouth</option> 
                        <option value="mobile.mycingular.com">Cingular</option> 
                        <option value="fido.ca">Fido Canada</option> 
                        <option value="messaging.nextel.com">Nextel</option> 
                        <option value="pager.qualcomm.com">Qualcomm</option> 
                        <option value="qwestmp.com">Qwest</option> 
                        <option value="pcs.rogers.com">Rogers Wireless</option> 
                        <option value="email.skytel.com">Skytel Pager</option> 
                        <option value="messaging.sprintpcs.com">Sprint PCS</option> 
                        <option value="tmomail.net">T-Mobile USA</option> 
                        <option value="msg.telus.com">Telus Mobility</option> 
                        <option value="utext.com">Unicel</option> 
                        <option value="email.uscc.net">US Cellular</option> 
                        <option value="vtext.com">Verizon</option> 
                        <option value="voicestream.net">Voicestream</option> 
                        <option value="vmobile.ca">Virgin Mobile Canada</option> 
                        <option value="vmobl.com">Virgin Mobile USA</option> 
                        <option value="">--Elsewhere--</option> 
                        <option value="orange.net">Orange</option> 
                        <option value="sms.orange.nl">Dutchtone/Orange-NL</option> 
                        <option value="kapow.co.uk">Kapow!</option> 
                        <option value="m1.com.sg">MobileOne</option> 
                        <option value="sms.netcom.no">Netcom</option> 
                        <option value="optusmobile.com.au">Optus</option> 
                        <option value="mujoskar.cz">Oskar</option> 
                        <option value="o2online.de">O2 Germany</option> 
                        <option value="mysmart.mymobile.ph">Smart Com (Philippines)</option> 
                        <option value="starhub.net.sg">StarHub (Singapore)</option> 
                        <option value="T-D1-SMS.de">T-Mobile Germany</option> 
                        <option value="t-mobile.co.uk">T-Mobile UK</option> 
                        <option value="gsm1800.telia.dk">Telia Denmark</option> 
                        <option value="mobilpost.no">Telenor</option> 
                        <option value="virginextra.com">Virgin Mobile UK</option> 
                        <option value="vodafone.de">Vodafone Germany</option> 
                        <option value="sms.vodafone.it">Vodafone Italy</option> 
                        <option value="vodafone.pt">Vodafone Portugal</option> 
                        <option value="euromail.se">Vodafone Sweden</option> 
                        <option value="c.vodafone.ne.jp">Vodafone Japan C</option> 
                        <option value="h.vodafone.ne.jp">Vodafone Japan H</option> 
                        <option value="t.vodafone.ne.jp">Vodafone Japan T</option> 
                    </select>
                    </div>
                    <input type="hidden" name="action" value="subscribe" />
                    <div style="display:none"><input type="text" name="VerificationCodeX" value="" size="20"></div>
                    <p>All of your info is kept secret and safe. Promise.</p>
                </fieldset>

                <div class="clear"></div>
                <button type="submit" class="pure-button pure-button-primary"><i class="fa fa-pencil"></i> Subscribe </button>  
            <script language="Javascript">
                $.verify.addRules({
                  cellphone: function(r) {
                    //pass validation if there is no carrier
                    if(!$("#carrier").val()) {
                      return true;
                    }
                    //perform cell validation here [Note: r.val() is a shortcut to $(element-being-validated).val() ]
                    if(/^\d{10}$/.test(r.val())) {
                      return "You must enter a valid cell-phone number";
                    }
                    //passed
                    return true;
                  }
                });
            </script>
        </form>
        <h1>Show Alert <i class="fa fa-bullhorn"></i></h1><br />
        <h2>Never miss a show.</h2><br />
        <h2 class="indent">Never miss the latest.</h2>      
    </div>
</div>