Create Account Validation Demo

This video demonstrates the account-creation form and client-side validation implemented for the Awrecking Goals website.

Video Demonstration

Watch the Awrecking Goals Create Account Demo

Website

Open the Awrecking Goals Website](https://storage.googleapis.com/dist_bucket_bruh/index.html#/create-account)

Features Demonstrated

The screen recording demonstrates the following features:

1. Navigating from the Sign In page to the Create Account page.
2. Entering the required username and email address.
3. Entering and confirming a password.
4. Completing the optional shipping-address section.
5. Selecting a state from the state dropdown menu.
6. Entering and validating a ZIP code and phone number.
7. Attempting to submit the form with an invalid password.
8. Displaying a validation message and highlighting the invalid password field.
9. Detecting when the password and confirmation password do not match.
10. Correcting the invalid fields and successfully passing validation.

Form Fields

Required Fields

• Username
• Email
• Password
• Confirm password

Optional Shipping Fields

• Street address
• City
• State
• ZIP code
• Phone number

The shipping information is optional. However, if an address is entered, all related address fields must be completed and contain valid information.

Validation Rules

The form uses client-side validation to check the information before accepting the demonstration submission.

• The username is required.
• The email must use a valid email-address format.
• The password must contain at least eight characters, including an uppercase letter, a lowercase letter, and a number.
• The confirmation password must match the original password.
• The ZIP code must contain a valid five-digit ZIP code.
• The phone number must contain a valid number.
• Invalid fields are highlighted and accompanied by an explanatory error message.

Successful Validation

After all errors are corrected, the form displays a success message confirming that all fields passed validation.

Awrecking Goals is a demonstration storefront. The form does not create a real account, store personal information, or send information to a server or database.

Responsive Design

The Create Account page uses a responsive two-column desktop layout. The branding and introductory message appear on the left, while the account form appears on the right. The layout adjusts for smaller screens so the form remains accessible on mobile devices.

Privacy Notice

Only fictional or demonstration information was used in the recording. No real account, payment, or customer information is created or stored.