Validation

Native validation is, to a great extent, supported by Conversational Form.

• required attribute
• minlength and maxlength attribute
• min and max attribute
• pattern attribute
• input types: text, tel, email, number etc.
• if type email then emailregex.com js-pattern is applied

Custom error message

You can use the cf-error attribute to define a custom error message when a field is not valid

Validating using javascript

Validate a submitted value before continuing the form flow using javascript.

• v1.0.0 and up: No use of eval(). All validation functions must be on window
• Do not include window in the cf-validation attribute value
• Asyncronous, so a value can be validated through a server
• three parameters is passed to the method
  • dto: FlowDTO
  • success: () => void //callback
  • error: (optionalErrorMessage?: string) => void //callback

<input type="text" cf-validation="lastnameCheck" />

var lastnameCheck = function(dto, success, error){
    console.log("testValidation, dto:", dto, success, error);
    if(dto.text.toLowerCase().indexOf("holmes") != -1)
        return success();
    return error();
};

Using flowStepCallback

var conversationalForm = window.cf.ConversationalForm.startTheConversation({
    formEl: document.getElementById("form"),
    context: document.getElementById("cf-context"),
    flowStepCallback: function(dto, success, error){
        
        if(dto.tag.id == "firstname"){
            if(dto.tag.value.toLowerCase() === "sherlock"){
                return success();
            }else{
                return error();
            }
            //conversationalForm.stop("Stopping form, but added value");
        }else if(dto.tag.name == "gender"){
            if(dto.tag.value[0] === "male"){
                return success();
            }else{
                return error();
            }
        }

        return success();
    }
});

Example using both validation strategies

See the Pen Conversational Forms - Validation by SPACE10 (@space10) on CodePen.