Merge pull request #807 from unitaryfund/645_indicate_submission_requ…

…ired_fields

#645: Indicate submission required fields

src/components/CategoryItemBox.js

@@ -60,7 +60,7 @@ const CategoryItemBox = (props) => {
     <tr>
       <td>
         <div className='row submission'>
-          <div className={'col-12 col-md-7'}>
+          <div className='col-12 col-md-7'>
             <Link to={pickDetailUrl(props.type, props.item)}>
               {props.type !== 'tag' && props.item.description &&
                 <div>

src/components/FormFieldRow.js

@@ -7,7 +7,7 @@ const TooltipTrigger = React.lazy(() => import('./TooltipTrigger'))
 const FormFieldRow = (props) => {
   const [value, setValue] = useState(props.value)
   const [checked, setChecked] = useState(props.checked ? props.checked : false)
-  const [isValid, setIsValid] = useState(true)
+  const [isValid, setIsValid] = useState((props.isValidatedOnStart && props.validRegex) ? props.validRegex.test(props.value) : true)
   const [imagePreviewUrl, setImagePreviewUrl] = useState('')
 
   useEffect(() => { setValue(props.value) }, [props.value])

src/components/ValidationRegex.js

@@ -14,12 +14,12 @@ const urlValidRegex = new RegExp('^(https?:\\/\\/)?' + // protocol
       '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
       '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
       '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
-const blankOrurlValidRegex = new RegExp('^(^(https?:\\/\\/)?' + // protocol
+const blankOrurlValidRegex = new RegExp('^$|(^(^(https?:\\/\\/)?' + // protocol
       '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
       '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
       '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
       '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-      '(\\#[-a-z\\d_]*)?$)$', 'i') // fragment locator
+      '(\\#[-a-z\\d_]*)?$)$)', 'i') // fragment locator
 const usernameValidRegex = /^(?!\s*$).+/
 
 module.exports = {

src/views/AddSubmission.js

@@ -477,6 +477,7 @@ class AddSubmission extends React.Component {
               onChange={this.handleOnChange}
               onBlur={this.handleOnFieldBlur}
               validRegex={this.state.isAlreadyInDatabase ? /^$/ : urlValidRegex}
+              isValidatedOnStart
             />
             <FormFieldAlertRow>
               <b>The external content URL points to the full content of the submission.<br />(This could be a link to arXiv, for example.)<br /><i>This cannot be changed after hitting "Submit."</i></b>
@@ -503,6 +504,7 @@ class AddSubmission extends React.Component {
               onChange={this.handleOnChange}
               validRegex={nonblankRegex}
               value={this.state.name}
+              isValidatedOnStart
             />
             <FormFieldAlertRow>
               <b>The submission name must be unique.</b>
@@ -522,6 +524,7 @@ class AddSubmission extends React.Component {
               onChange={this.handleOnChange}
               validRegex={blankOrurlValidRegex}
               value={this.state.thumbnailUrl}
+              isValidatedOnStart
             />
             <FormFieldAlertRow>
               <b>The image URL is loaded as a thumbnail, for the submission.<br />(For free image hosting, see <a href='https://imgbb.com/' target='_blank' rel='noreferrer'>https://imgbb.com/</a>, for example.)</b>