Ability to customize validation rules for form fields

[Michael_Ebner1]

Hi, 
Currently a Forms 2.0 "Website" field requires a user to input their website in the format of "http://www.website.com"

This is too strict and very annoying for the user. It would be great if there was a way to customize the validation rules so that, in the case of the "Website" field for example, we could have the flexability to allow the user to input "website.com" or "www.website.com" or "http://www.website.com" and they would all validate.

The Phone field as well is too strict, requiring the "555-123-4567" format. The Phone field should validate with or without the dashes, with dots (.) or with parentheses, not to mention some way to validate international phone numbers.

Thanks for listening.

[Anonymous]

One option for the moment is to make a custom field with a type of string. It's the other extreme, but it'll validate OK for anything someone wants to submit.

[Michael_Ebner1]

True, but like you said, it's the other extreme and too loose for my liking.

[Justin_Cooperm2]

If you're really passionate about setting this up, I'd encourage you to check out the Forms 2.0 API, which demonstrates how to inspect form fields, enabling you to implement custom validation in JavaScript.

[Anonymous]

@Michael, this post shows an example of using Marketo's custom form validation that Justin mentioned.

[Michael_Ebner1]

Thank you Justin and Murtza for the advice. I'm definitely going to explore this option.

[Michael_Ebner1]

Figured I'd post my solution to this based on Justin's and Murtza's advice in case anyone else would like to accomplish the same thing.

First I set the field type of the website field in your form to "Text" instead of "Website." This disables the default validation that Marketo uses on the URL which, IMO, is too strict. 

 Working with an embedded form per the Forms 2.0 API I added the callback function

function(form)

 to the last line of the embed code - so it looks like this:
 

<script>MktoForms2.loadForm("//app-sjp.marketo.com", "785-UHP-775", 1057, function(form){

then…

    //listen for the validate event
    form.onValidate(function(){
        //set up the regular expression against which the entered URL will be checked
        var validUrl = /^(https?:\/\/)?(www\.)?[a-zA-Z0-9]+\.([a-zA-Z]{2,4})\/?$/;
        //get the values from the form
        var vals = form.vals();
        //Check your condition
        if(!validUrl.test(vals.Website)){
            //prevent form submission
            form.submittable(false);
            //Show error message, pointed at Website element
            var websiteElem = form.getFormElem().find("#Website");
            form.showErrorMessage("There seems to be a problem with the entered URL", websiteElem);
        }else{
            //enable submission for those who entered an acceptable URL.
            form.submittable(true);
        }
    });
});
</script>

[Anonymous]

@Michael, I like your implementation. 

[Michael_Ebner1]

Thanks Murtza! And thanks for the help.