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.