Change:
Describe the bug For field in , error state can not be triggered. Warning state will be triggered when an email address with incorrect domain is entered (for example: ). For all fields in , both error and success state can not be triggered. To Reproduce Steps to reproduce the behavior: to http://localhost:8000/settings to fill and to Describe the bug Expected behavior For field in , error state should be triggered instead of warning state. There should only be two states for an email address. Success state is when it is a valid and reachable email address. Error state is when it is an invalid and unreachable email address. For all fields in . Success state is when it is a valid and reachable URL. Error state is when it is an invalid and unreachable URL. Desktop (please complete the following information): OS: Windows 10 1809 Build .832 Browser Latest Chrome Version 77.0.3865.120 (Official Build) (64-bit)
Calling to discuss this from issue . What do you think about this? Are there anything to add or change from the Expected Behavior I described?
the only thing I'm not sure about is 'unreachable'. Do you just mean unreachable because the URL is malformed? Like , for example. If so, then I completely agree. cc
Yes of course. 'Unreachable' is only defined by malformed email format ( valid length, etc) and URL format (protocol, colon, double slash, etc). It is also possible to check the top level domain part against current existing TLD programatically. Other than that, for example checking real email address which is existing should be done by email confirmation / verification.

Discussion:
return { state: 'success', message: '' }; } else { return { <del> state: 'warning', </del> <ins> state: 'error', </ins> message: 'We could not validate your email correctly, ' + 'please ensure it is correct'

import React, { Fragment, Component } from 'react'; import PropTypes from 'prop-types'; import { <ins> HelpBlock, </ins> FormControl, FormGroup, ControlLabel

getValidationStateFor(maybeURl = '') { if (!maybeURl || !maybeUrlRE.test(maybeURl)) { <del> return null; </del> <ins> return { state: null, message: '' }; </ins> } if (isURL(maybeURl)) { <del> return 'success'; </del> <ins> return { state: 'success', message: '' }; </ins> } <del> return 'error'; </del> <ins> return { state: 'error', message: 'We could not validate your URL correctly, ' + 'please ensure it is correct' }; </ins> } createHandleChange = key => e => {

const { formValues: { githubProfile, linkedin, twitter, website } } = this.state; <ins> const { state: githubProfileValidation, message: githubProfileValidationMessage } = this.getValidationStateFor(githubProfile); const { state: linkedinValidation, message: linkedinValidationMessage } = this.getValidationStateFor(linkedin); const { state: twitterValidation, message: twitterValidationMessage } = this.getValidationStateFor(twitter); const { state: websiteValidation, message: websiteValidationMessage } = this.getValidationStateFor(website); </ins> return ( <Fragment> <SectionHeader>Your Internet Presence</SectionHeader>

<form id='internet-presence' onSubmit={this.handleSubmit}> <FormGroup controlId='internet-github' <del> validationState={this.getValidationStateFor(githubProfile)} </del> <ins> validationState={githubProfileValidation} </ins> > <del> <ControlLabel> <strong>GitHub</strong> </ControlLabel> </del> <ins> <ControlLabel>GitHub</ControlLabel> </ins> <FormControl onChange={this.createHandleChange('githubProfile')} type='url' value={githubProfile} /> <ins> {githubProfileValidationMessage ? ( <HelpBlock>{githubProfileValidationMessage}</HelpBlock> ) : null} </ins> </FormGroup> <FormGroup controlId='internet-linkedin' <del> validationState={this.getValidationStateFor(linkedin)} </del> <ins> validationState={linkedinValidation} </ins> > <del> <ControlLabel> <strong>LinkedIn</strong> </ControlLabel> </del> <ins> <ControlLabel>LinkedIn</ControlLabel> </ins> <FormControl onChange={this.createHandleChange('linkedin')} type='url' value={linkedin} /> <ins> {linkedinValidationMessage ? ( <HelpBlock>{linkedinValidationMessage}</HelpBlock> ) : null} </ins> </FormGroup> <FormGroup controlId='internet-picture' <del> validationState={this.getValidationStateFor(twitter)} </del> <ins> validationState={twitterValidation} </ins> > <del> <ControlLabel> <strong>Twitter</strong> </ControlLabel> </del> <ins> <ControlLabel>Twitter</ControlLabel> </ins> <FormControl onChange={this.createHandleChange('twitter')} type='url' value={twitter} /> <ins> {twitterValidationMessage ? ( <HelpBlock>{twitterValidationMessage}</HelpBlock> ) : null} </ins> </FormGroup> <FormGroup controlId='internet-website' <del> validationState={this.getValidationStateFor(website)} </del> <ins> validationState={websiteValidation} </ins> > <del> <ControlLabel> <strong>Personal Website</strong> </ControlLabel> </del> <ins> <ControlLabel>Personal Website</ControlLabel> </ins> <FormControl onChange={this.createHandleChange('website')} type='url' value={website} /> <ins> {websiteValidationMessage ? ( <HelpBlock>{websiteValidationMessage}</HelpBlock> ) : null} </ins> </FormGroup> <BlockSaveButton disabled={