add client side sign up validation erros

This commit is contained in:
catarak 2016-09-02 13:05:42 -04:00
parent f00acd0de0
commit 798117164a
4 changed files with 23 additions and 3 deletions

View file

@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
function SignupForm(props) { function SignupForm(props) {
const { fields: { username, email, password, confirmPassword }, handleSubmit } = props; const { fields: { username, email, password, confirmPassword }, handleSubmit } = props;
console.log(props.fields);
return ( return (
<form className="signup-form" onSubmit={handleSubmit(props.signUpUser.bind(this))}> <form className="signup-form" onSubmit={handleSubmit(props.signUpUser.bind(this))}>
<p className="signup-form__field"> <p className="signup-form__field">
@ -12,6 +13,7 @@ function SignupForm(props) {
placeholder="Username" placeholder="Username"
{...username} {...username}
/> />
{username.touched && username.error && <span className="form-error">{username.error}</span>}
</p> </p>
<p className="signup-form__field"> <p className="signup-form__field">
<input <input
@ -21,6 +23,7 @@ function SignupForm(props) {
placeholder="Email" placeholder="Email"
{...email} {...email}
/> />
{email.touched && email.error && <span className="form-error">{email.error}</span>}
</p> </p>
<p className="signup-form__field"> <p className="signup-form__field">
<input <input
@ -30,6 +33,7 @@ function SignupForm(props) {
placeholder="Password" placeholder="Password"
{...password} {...password}
/> />
{password.touched && password.error && <span className="form-error">{password.error}</span>}
</p> </p>
<p className="signup-form__field"> <p className="signup-form__field">
<input <input
@ -39,6 +43,7 @@ function SignupForm(props) {
aria-label="confirm password" aria-label="confirm password"
{...confirmPassword} {...confirmPassword}
/> />
{confirmPassword.touched && confirmPassword.error && <span className="form-error">{confirmPassword.error}</span>}
</p> </p>
<input type="submit" value="Sign Up" aria-label="sign up" /> <input type="submit" value="Sign Up" aria-label="sign up" />
</form> </form>

View file

@ -27,11 +27,19 @@ function validate(formProps) {
const errors = {}; const errors = {};
if (!formProps.username) { if (!formProps.username) {
errors.username = 'Please enter a username'; errors.username = 'Please enter a username.';
} else if (!formProps.username.match(/^.{1,20}$/)) {
errors.username = 'Username must be less than 20 characters.';
} else if (!formProps.username.match(/^[a-zA-Z0-9._-]{1,20}$/)) {
errors.username = 'Username must only consist of numbers, letters, periods, dashes, and underscores.';
} }
if (!formProps.email) { if (!formProps.email) {
errors.email = 'Please enter an email'; errors.email = 'Please enter an email.';
} else if (!formProps.email.match(/^[-a-z0-9~!$%^&*_=+}{'?]+(\.[-a-z0-9~!$%^&*_=+}{'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i)) {
errors.email = 'Please enter a valid email address.';
} }
if (!formProps.password) { if (!formProps.password) {
errors.password = 'Please enter a password'; errors.password = 'Please enter a password';
} }
@ -46,7 +54,6 @@ function validate(formProps) {
return errors; return errors;
} }
// export default connect(mapStateToProps, mapDispatchToProps)(SignupView);
export default reduxForm({ export default reduxForm({
form: 'signup', form: 'signup',
fields: ['username', 'email', 'password', 'confirmPassword'], fields: ['username', 'email', 'password', 'confirmPassword'],

View file

@ -0,0 +1,7 @@
.form-error {
display: block;
padding-top: #{10 / $base-font-size}rem;
color: $console-error-color;
width: #{300 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
}

View file

@ -24,6 +24,7 @@
@import 'components/overlay'; @import 'components/overlay';
@import 'components/about'; @import 'components/about';
@import 'components/github-button'; @import 'components/github-button';
@import 'components/forms';
@import 'layout/ide'; @import 'layout/ide';
@import 'layout/sketch-list'; @import 'layout/sketch-list';