How to add new validations to Marketo form

Question

As am not good with JS and Jquery, am struggling to add new validation rule to the Marketo form, which shows error message when tried to submit the form leaving any field empty along with I need to validate the FirstName and LastName fields to allow only the alphabetic characters and should through a error message when numeric characters are entered. Below is my Marketo LP: http://qliktest.qlik.com/Vinu-Test1_Reg_Form.html

Answer 1

Here is an example of custom email validation. You can put the custom code in whenReady function.

MktoForms2.whenReady(function(form) {
function isEmailValid(email) {
    RE_EMAIL_ASCII_PUBLIC = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;
    return RE_EMAIL_ASCII_PUBLIC.test(email);
}

form.onValidate(function() {
    var values = form.vals();
    if (values.Email) {
        if (!isEmailValid(values.Email)) {
            form.submitable(false);
            var emailElem = form.getFormElem().find("#Email");
            form.showErrorMessage(
                // write your message here
                "Must be valid email.",
                emailElem
            );
        } else {
            form.submitable(true);
        }
    }
});

Answer 2

If you mark the fields as "required" in Marketo there is already logic built in that will take care of the validation for you. If you want to create some custom validation logic, IE only allowing alphabetic characters in the fields, you need to use the Marketo Forms 2.0 Javascript API (http://developers.marketo.com/documentation/websites/forms-2-0/ )

Here's an example of validating a Marketo form field using the API:

MktoForms2.whenReady(function (form) {

 //listen for the validate event form.onValidate(function() { // Get the values var vals = form.vals(); //Check your condition if (vals.Country == "USA" && vals.vehicleSize != "Massive") { // Prevent form submission form.submittable(false); // Show error message, pointed at VehicleSize element var vehicleSizeElem = form.getFormElem().find("#vehicleSize"); form.showErrorMessage("All Americans must have a massive vehicle", vehicleSizeElem); } else { // Enable submission for those who met the criteria form.submittable(true); } }); });