jQuery validation - Validate field as URL only if it has a value

Question

I am using the jQuery.validation plugin to validate a form. There is an optional field on the form called 'survey_url'. If this field is blank I don't want it validated, however if there is a value I want to make sure it is a valid URL.

I have the following rules, but despite the fact I have not set survey_url to 'required', it is flagged as an invalid URL even when it has no value:

  //form validation rules
  form.validate({
      errorClass: "help-inline",
      rules: {
          "webcast[title]": "required",
          "webcast[survey_url]":
          {
            url: true
          }
      },
      messages: {
          "webcast[title]": 
          {
              required: "Please enter a title for this Webcast."
          },
          "webcast[survey_url]": 
          {
              required:"You must enter a valid URL, or leave blank."
          }
      },
      submitHandler: function(form) {
          form.submit();
      }
  });

What should my rules look like so that survey_url is only validated as a URL if it has a value?

You can create your own custom rule, have a look at the answer for the [question](http://stackoverflow.com/questions/241145/jquery-validate-plugin-how-to-create-a-simple-custom-rule) here... might be useful for you — alekperos, Sep 23 '12 at 16:53

score 1 · Accepted Answer · answered Sep 24 '12 at 14:54

There must be something else going on in your script, because with what you've given, it works as expected: http://jsfiddle.net/ryleyb/ztDwh/1/

You should be able to submit that form with just the title filled, and nothing in the URL. If you put in a URL, it must be in a correct URL format. Sounds like what you want?

score 0 · Answer 2 · answered Sep 23 '12 at 17:02

url=$("#survey_url").val();
url=$.trim("#survey_url");

if (url!=""){

if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?   $/i.test(url)) {
 alert("valid url");
 } else {
 alert("invalid url");
 }
 }

jQuery validation - Validate field as URL only if it has a value

2 Answers2