Rebased with development branch and added validation to form

src/views/pages/CLView/ApplyNowModal.js

@@ -6,11 +6,13 @@ import {
   DialogContentText,
   DialogTitle,
   Button,
-  Typography
+  Typography,
+  MenuItem,
+  Grid
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
+import { ValidatorForm, TextValidator, SelectValidator } from 'react-material-ui-form-validator';
 import { useSnackbar } from 'notistack';
 import axios from 'axios';
 
@@ -45,6 +47,8 @@ export default function ApplyNowModal() {
 
   const handleClickOpen = () => {
     setOpen(true);
+    formData.countryCode = '+91';
+    formData.phone = '';
   };
 
   const handleClose = () => {
@@ -59,6 +63,7 @@ export default function ApplyNowModal() {
   };
 
   const handleSubmit = e => {
+    formData.phone = `${formData.countryCode}-${formData.phone}`;
     setSubmitting(1);
     e.preventDefault();
     axios({
@@ -77,6 +82,11 @@ export default function ApplyNowModal() {
       });
   };
 
+  const countryCodes = Array(100)
+    .fill(1)
+    .map((x, y) => x + y)
+    .reverse();
+
   return (
     <div>
       <Button
@@ -123,22 +133,44 @@ export default function ApplyNowModal() {
               fullWidth
               name="email"
               onChange={handleChange}
-              validators={['required']}
-              errorMessages={['This is a required field']}
+              validators={['required', 'isEmail']}
+              errorMessages={['This is a required field', 'Please enter a valid email']}
             />
 
-            <TextValidator
-              key="contact"
-              className={classes.textField}
-              label="WhatsApp / Contact Number "
-              variant="outlined"
-              value={formData.phone}
-              fullWidth
-              name="phone"
-              onChange={handleChange}
-              validators={['required']}
-              errorMessages={['This is a required field']}
-            />
+            <Grid container spacing={2} justify="space-evenly">
+              <Grid item xs={2}>
+                <SelectValidator
+                  key="countryCode"
+                  className={classes.textField}
+                  value={formData.countryCode}
+                  onChange={handleChange}
+                  name="countryCode"
+                  variant="outlined"
+                  validators={['required']}
+                  errorMessages={['Please select a country code']}
+                  fullWidth
+                >
+                  {countryCodes.map((code) => {
+                    return <MenuItem value={`+${code}`}>+{code}</MenuItem>;
+                  })}
+                </SelectValidator>
+              </Grid>
+
+              <Grid item xs={10}>
+                <TextValidator
+                  key="contact"
+                  className={classes.textField}
+                  label="WhatsApp / Contact Number "
+                  variant="outlined"
+                  value={formData.phone}
+                  fullWidth
+                  name="phone"
+                  onChange={handleChange}
+                  validators={['required', 'matchRegexp:^[+]*[(]*[+]{0,1}[0-9]{1,3}[)]{0,1}[-s./0-9]*$']}
+                  errorMessages={['This is a required field', 'Please enter a valid contact number']}
+                />
+              </Grid>
+            </Grid>
 
             <TextValidator
               key="linkedIn"
@@ -149,8 +181,8 @@ export default function ApplyNowModal() {
               fullWidth
               name="linkedIn"
               onChange={handleChange}
-              validators={['required']}
-              errorMessages={['This is a required field']}
+              validators={['required', 'matchRegexp:^(http(s)?://)?([w]+.)?linkedin.com/(pub|in|profile)']}
+              errorMessages={['This is a required field', 'Please enter a valid URL']}
             />
 
             <TextValidator
@@ -166,18 +198,25 @@ export default function ApplyNowModal() {
               errorMessages={['This is a required field']}
             />
 
-            <TextValidator
+            <SelectValidator
               key="year"
               className={classes.textField}
-              label="Year"
-              variant="outlined"
               value={formData.year}
-              fullWidth
-              name="year"
               onChange={handleChange}
+              name="year"
+              variant="outlined"
               validators={['required']}
-              errorMessages={['This is a required field']}
-            />
+              errorMessages={['Please select a year']}
+              label="Year"
+              fullWidth
+            >
+              <MenuItem value={1}>1st</MenuItem>
+              <MenuItem value={2}>2nd</MenuItem>
+              <MenuItem value={3}>3rd</MenuItem>
+              <MenuItem value={4}>4th</MenuItem>
+              <MenuItem value={5}>5th</MenuItem>
+              <MenuItem value={6}>6th</MenuItem>
+            </SelectValidator>
 
             <TextValidator
               key="college"