Merge pull request #158 from rymaju/feature/event_type_required_field_validation
Perform simple validation for required fields
This commit is contained in:
		
						commit
						dfadd3178d
					
				
					 4 changed files with 10 additions and 8 deletions
				
			
		|  | @ -74,7 +74,7 @@ export default function EventType(props) { | |||
|                                     <div className="mb-4"> | ||||
|                                         <label htmlFor="title" className="block text-sm font-medium text-gray-700">Title</label> | ||||
|                                         <div className="mt-1"> | ||||
|                                             <input ref={titleRef} type="text" name="title" id="title" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" defaultValue={props.eventType.title} /> | ||||
|                                             <input ref={titleRef} type="text" name="title" id="title" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" defaultValue={props.eventType.title} /> | ||||
|                                         </div> | ||||
|                                     </div> | ||||
|                                     <div className="mb-4"> | ||||
|  | @ -89,6 +89,7 @@ export default function EventType(props) { | |||
|                                                     type="text" | ||||
|                                                     name="slug" | ||||
|                                                     id="slug" | ||||
|                                                     required | ||||
|                                                     className="flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" | ||||
|                                                     defaultValue={props.eventType.slug} | ||||
|                                                 /> | ||||
|  | @ -104,7 +105,7 @@ export default function EventType(props) { | |||
|                                     <div className="mb-4"> | ||||
|                                         <label htmlFor="length" className="block text-sm font-medium text-gray-700">Length</label> | ||||
|                                         <div className="mt-1 relative rounded-md shadow-sm"> | ||||
|                                             <input ref={lengthRef} type="number" name="length" id="length" className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" defaultValue={props.eventType.length} /> | ||||
|                                             <input ref={lengthRef} type="number" name="length" id="length" required className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" defaultValue={props.eventType.length} /> | ||||
|                                             <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm"> | ||||
|                                                 minutes | ||||
|                                             </div> | ||||
|  |  | |||
|  | @ -214,7 +214,7 @@ export default function Availability(props) { | |||
|                                         <div className="mb-4"> | ||||
|                                             <label htmlFor="title" className="block text-sm font-medium text-gray-700">Title</label> | ||||
|                                             <div className="mt-1"> | ||||
|                                                 <input ref={titleRef} type="text" name="title" id="title" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" /> | ||||
|                                                 <input ref={titleRef} type="text" name="title" id="title" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" /> | ||||
|                                             </div> | ||||
|                                         </div> | ||||
|                                         <div className="mb-4"> | ||||
|  | @ -229,6 +229,7 @@ export default function Availability(props) { | |||
|                                                         type="text" | ||||
|                                                         name="slug" | ||||
|                                                         id="slug" | ||||
|                                                         required | ||||
|                                                         className="flex-1 block w-full focus:ring-blue-500 focus:border-blue-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" | ||||
|                                                     /> | ||||
|                                                 </div> | ||||
|  | @ -243,7 +244,7 @@ export default function Availability(props) { | |||
|                                         <div className="mb-4"> | ||||
|                                             <label htmlFor="length" className="block text-sm font-medium text-gray-700">Length</label> | ||||
|                                             <div className="mt-1 relative rounded-md shadow-sm"> | ||||
|                                                 <input ref={lengthRef} type="number" name="length" id="length" className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" /> | ||||
|                                                 <input ref={lengthRef} type="number" name="length" id="length" required className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" /> | ||||
|                                                 <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm"> | ||||
|                                                     minutes | ||||
|                                                 </div> | ||||
|  |  | |||
|  | @ -62,13 +62,13 @@ export default function Settings(props) { | |||
|                             <div className="w-1/2 mr-2"> | ||||
|                                 <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">Current Password</label> | ||||
|                                 <div className="mt-1"> | ||||
|                                     <input ref={oldPasswordRef} type="password" name="current_password" id="current_password" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Your old password" /> | ||||
|                                     <input ref={oldPasswordRef} type="password" name="current_password" id="current_password" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Your old password" /> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             <div className="w-1/2 ml-2"> | ||||
|                                 <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">New Password</label> | ||||
|                                 <div className="mt-1"> | ||||
|                                     <input ref={newPasswordRef} type="password" name="new_password" id="new_password" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Your super secure new password" /> | ||||
|                                     <input ref={newPasswordRef} type="password" name="new_password" id="new_password" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Your super secure new password" /> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                         </div> | ||||
|  |  | |||
|  | @ -80,12 +80,12 @@ export default function Settings(props) { | |||
|                                             <span className="bg-gray-50 border border-r-0 border-gray-300 rounded-l-md px-3 inline-flex items-center text-gray-500 sm:text-sm"> | ||||
|                                                 {window.location.hostname}/ | ||||
|                                             </span> | ||||
|                                             <input ref={usernameRef} type="text" name="username" id="username" autoComplete="username" className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" defaultValue={props.user.username} /> | ||||
|                                             <input ref={usernameRef} type="text" name="username" id="username" autoComplete="username" required className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" defaultValue={props.user.username} /> | ||||
|                                         </div> | ||||
|                                     </div> | ||||
|                                     <div className="w-1/2 ml-2"> | ||||
|                                         <label htmlFor="name" className="block text-sm font-medium text-gray-700">Full name</label> | ||||
|                                         <input ref={nameRef} type="text" name="name" id="name" autoComplete="given-name" placeholder="Your name" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.name} /> | ||||
|                                         <input ref={nameRef} type="text" name="name" id="name" autoComplete="given-name" placeholder="Your name" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.name} /> | ||||
|                                     </div> | ||||
|                                 </div> | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue
	
	 Bailey Pumfleet
						Bailey Pumfleet