# Password Confirmation Form

In this guide you will see how to easily create forms, add validation, and get form data.

NOTE

If you haven't already read the Contact Form Guide, please read it before you continue so you have a better idea of how forms are submitted and validated.

# Create a Password Confirmation Form

The contact form will have the following requirements:

Field	Requirements
Username	required
Password	required, must be at least 8 characters, and must have 1 special character
Confirm Password	required, must match Password field

Translating those requirements into code is actually pretty straight forward with Kickstand UI.

<ks-form id="confirm_password">
    <ks-form-field 
        label="Username" 
        required>
    </ks-form-field>
    <ks-form-field 
        label="Password" 
        type="password" 
        help-text="Must be at least 8 characters and include 1 special character" 
        minlength="8"
        pattern="^.*(?=.*[a-zA-Z])(?=.*[!#$%&?]).*$" 
        pattern-error-message="You are missing a special character" 
        required>
    </ks-form-field>
    <ks-form-field 
        label="Confirm Password" 
        type="password"
        required>
    </ks-form-field>
    <ks-button type="submit">Submit</ks-button>
</ks-form>

Submit

# Submitting the Form

Adding custom validation to the Confirm Password is fairly straight forward. We will execute some custom logic in our submitted event listener and update the UI to reflect the validation.

The first thing we should do is add add an event listener for the form's submitted event.

$('#confirm_password').on('submitted', (event) => {
    const confirmPasswordFormData = event.detail;

    // do something cool!
});

NOTE

This guide uses the Kickstand UI DOM utilities to help keep the code clean and easy to read.

The formData is an object that has the form field data as well as some validation information.

{
    formFieldData: [...],
    isValid: false
}

isValid indicates the overall validation of the form and formFieldData contains the values and individual validation information about each of the input fields.

{
    isValid: false,
    name: "username",
    validity: {...},
    value: "Some value"
}

# Validate the Form

Now that we are listening for the submitted event and have the form data, let's verify that the form passed the initial validation we added to the fields before adding custom our validation. If it's not, let's skip the custom validation check.

const $confirmPasswordForm = $('#confirm_password');
$confirmPasswordForm.on('submitted', (event) => {
    const confirmPasswordFormData = event.detail;

    if(!confirmPasswordFormData.isValid)
        return;

    // do something cool!
});

# Custom Validation

If the form is valid, let's check to see if the Password and Confirm Password field values match. Here we will select the field by the name property. The name property is auto-generated based on the form label. If you are worried about this changing, you can set the name manually by setting the name property on the <ks-form-field> component.

const $confirmPasswordForm = $('#confirm_password');
$confirmPasswordForm.on('submitted', (event) => {
    const confirmPasswordFormData = event.detail;

    if (!confirmPasswordFormData.isValid) 
        return;

    const formData = confirmPasswordFormData.formData;
    const password = formData.password;
    const confirmPassword = formData["confirm-password"];

    if(password === confirmPassword) {
        // submit the form
    } else {
        // let the user know they don't match
    }
});

# Update Form

We won't go over submitting the form today, so we will just add a quick alert with the Username to show the form was completed and reset the form validation state. However, we should let the user know if the passwords don't match. We can do this with 3 simple steps:

Set the form to invalid
Update the Confirm Password field's error message to something meaningful
Set the Confirm Password field to invalid

if (password === confirmPassword) {
    $('#new_username').innerText = formData.username;
    $('#welcome_message').hidden = false;
    $confirmPasswordForm.hidden = true;
} else {
    const $confirmPasswordField = $("#confirm_password");
    $confirmPasswordForm.invalid = true; // 1
    $confirmPasswordField.defaultErrorMessage = "Your passwords do not match"; // 2
    $confirmPasswordField.invalid = true; // 3
}

# Complete Code and Demo

See the Pen Kickstand UI Sign Up Form by break-stuff (@break-stuff) on CodePen.

# Final Code

<h1 class="text-center text-lg">Kickstand UI Sign-Up Form</h1>
<p id="welcome_message" class="text-xl text-center mt-xxl" hidden>Welcome to the app, <span id="new_username"></span>!</p>
<ks-form class="w-content mx-auto my-xxl" id="confirm_password_form">
    <ks-form-field
        id="username"
        label="Username"
        required>
    </ks-form-field>
    <ks-form-field
        id="password"
        label="Password"
        type="password"
        help-text="Must be at least 8 characters and include 1 special character"
        minlength="8"
        pattern="^.*(?=.*[a-zA-Z])(?=.*[!#$%&?]).*$"
        pattern-error-message="You are missing a special character"
        required>
    </ks-form-field>
    <ks-form-field
        id="confirm_password"
        label="Confirm Password"
        type="password"
        required>
    </ks-form-field>
    <ks-button type="submit">Submit</ks-button>
</ks-form>

const $confirmPasswordForm = $("#confirm_password_form");
$confirmPasswordForm.on("submitted", (event) => {
    const confirmPasswordFormData = event.detail;

    if (!confirmPasswordFormData.isValid) 
        return;

    const formData = confirmPasswordFormData.formData;
    const password = formData.password;
    const confirmPassword = formData["confirm-password"];

    if (password === confirmPassword) {
        $('#new_username').innerText = formData.username;
        $('#welcome_message').hidden = false;
        $confirmPasswordForm.hidden = true;
    } else {
        const $confirmPasswordField = $("#confirm_password");
        $confirmPasswordForm.invalid = true;
        $confirmPasswordField.defaultErrorMessage = "Your passwords do not match";
        $confirmPasswordField.invalid = true;
    }
});

← Contact Form Search Form →