Because you’re going to continue to work with this script in the next chapter, you should put it in a separate file in the jsfolder called valid-date.js. This file will contain a function that is functionally equivalent to the _validDate() method in the Calendar class.
It will accept a date to validate, check it against the date-matching regex pattern you wrote previously using match(), and then return true if a match is found or false if match() returns null. You build this function by inserting the following code into valid-date.js:// Checks for a valid date string (YYYY-MM-DD HH:MM:SS)
Note:The regex pattern is not enclosed in quotes. If you used quotes, the pattern would be stored as a string and interpreted accordingly—this would result in the script looking for an exact character match, rather than interpreting the regex pattern properly.
Including the New File in the Footer
Preventing the Form Submission if Validation Fails
Now that validDate() is available in init.js, you need to add date validation before the form can be submitted. Store the start and end dates in variables (start and end, respectively), then check them using validDate() before allowing the form to be submitted.
Next, modify the click handler to the Submit button on the form that edits or creates events, and then trigger an alert with a helpful error message if either date input has an invalid value. You need to prevent the form from being submitted as well, so the user doesn’t have to repopulate the other form fields.
You accomplish this by inserting the following bold code into init.js:// Makes sure the document is ready before executing scripts
Now save these changes, load http://localhost/ in your browser, and then create a new event with bad parameters using the modal window form
An entry that will fail to validate
If you click the Submit button at this point, the validation will fail, and the app will show an alert box with the error message about the date format
The error message in an alert box after failing validation
After clicking the OK button in the alert box, the user will be able to edit her entry without having to repopulate any fields.
PHP and Jquery Related Interview Questions
|PHP Interview Questions||Zend Interview Questions|
|PHP+MySQL Interview Questions||Sybase Interview Questions|
|Dbase Interview Questions||Magento Interview Questions|
|PHP5 Interview Questions||WordPress Interview Questions|
|CakePHP Interview Questions||CodeIgniter Interview Questions|
|Firebase Interview Questions||SQLite Interview Questions|
|PHP7 Interview Questions||Object Oriented Programming in PHP Interview Questions|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.