Laravel 58 Client Side Form Validation using Parsleysjs

Author:

Webslesson

Keywords:

laravel,laravel parsley,laravel parsley validation,laravel parsley.js,parsley js laravel,parsley validation laravel,form validation,client side form validation,frontend form validation,laravel client side validation,laravel frontend form validation,Parsley,parsleyjs,example,library,form,validation,parsley,javascript,js,client,side,front,frontend,Parsley laravel 5.8 example,parsleyjs example laravel,laravel js validation

Subtitles:
hello friends in this video tutorial we will learn how can we do client-side form data validation by using Parsley's javascript library in larvell framework we all know parsley is the powerful javascript library which has been used for form validation at client-side it is dynamic form validation library which has been used by many web developers forefront and form validation now here we have learned how can we use parsley form validation library with Louisville framework so we can perform form data validation at clients side in Louisville framework now let's start discussing this topic so this is our Louisville working folder here first we want to make database connection so we have open laravel environment file and here we have defined my SQL hostname set to local host database name set to testing user name set to root and password set to blank here we have make form validation controller file in controllers folder and form validation dot blade PHP view file in views folder first we have go-to controller and here we have write use statement with database by using this we can perform database operation after this we have make index method this is the root method of this controller under this we have right return statement with view method and under this we have right form validation it will load form validation dot blade dot PHP file in browser now we have to form validation dot blade PHP file and under this we have already imported bootstrap library jQuery library and parsley JavaScript library URL first we want to make one register form so here we have write HTML form tag with ID is equal to validate form this form ID we will use to initialize parsely JavaScript under this form first we have right at the rate CSRF expression it will protect your Louisville application from cross-site request forgery attacks below this we have right input type is equal to text and name and ID attribute is equal to first name placeholder attribute is equal to and your first name here we have required a tribute for validation same way for enter lastname details here we have right input type is equal to text name and ID is equal to last name after this we have rightt placeholder a tribute is equal to and your last name and for validation here we have right required attribute after this in third field we want to enter email details so here we have write input type is equal to text name and ID is equal to email here have rightt placeholder attribute is equal to enter email and for required filed validation here we have write required attribute for filled password details we have right input type is equal to password name and ID is equal to password after this we have rightt placeholder a tribute is equal to password and for required field form validation here we have add required attribute now here we have again right input type is equal to password name and ID is equal to confirm password after this we have right place holder is equal to confirm password and for required field validation here we have right required same way for Phil website details here we have right input type is equal text name and ID is equal to website after this we want to get confirmation from user he has accept our terms and condition for this here we have right input type is equal to checkbox this we have right name and ID attribute is equal to check rules every user must be accept terms and condition so here we have add required attribute lastly for submit form details we have write input type is equal to submit name ID and value is equal to submit by click on this button user details will be submitted to PHP script for activate parsley javascript library on this form so here we have write dollar with form ID validate form with parsley method this method will activate this library on this form data now check this out put in browser first we want to set the root of index method so we have open web dot PHP file here we have right root class with get method and under this we have right form validation and form validation controller at index so it will called form validation controller index method when we have right base URL slash form validation in browser friends here we can see here we have enter base URL slash form validation then here we can see register form on web page with submit button so when we have click on submit button then we can see html5 validation on web page but we want to use parsley library for form validation so now we have start discussing form validation using parsley javascript library for this we have go-to form validation blade file and here all fields are required to fill so first we want to validate first name textbox and under this user can only alphabet character without space so here we have right data parsley pattern attribute is equal to pattern for accept only alphabet character without space it will validate value of this field which has been matched with define regular expression if value not matched then it will display validation message on web page with text box background color will be changed after this here we have add one more attribute like deta parsley trigger is equal to key up event it will display validation error on key up event friends here we have refresh page and directly click on submit button so here we can see validation message on webpage same way we have write John one two three and first name then untie ping it has display validation message like invalid value so this way we can validate first name using parsley JavaScript library without write any line of code now we want to use same validation for last name also so here also we have right data parsley pattern attribute is equal to regular expression for accept only alphabetic character without space after this here we have also write data parsley trigger attribute is equal to key up so it will trigger validation on key up event now we want to validate email address so here we have right data parsley type attribute is equal to email it will validate that value is a valid address or not after this on which event we want to display validation message for this here we have right data parsley trigger is equal to key up so it will display invalid email on key up event here friends first we have refresh page and an email field we have typed something and after write something it has display invalid email adress message on web page now we have type proper email like John Smith at the rate webs lesson dot info then it has removed validation message from webpage so this way we can validate email using parsley library without write any line of code after this we want to validate password field value so here we have right data parsley length attribute is equal to 8 and 16 this attribute will validate password length which has been between minimum 8 and maximum 16 if password string length not come in between this 2 range then it will display invalid password error on webpage now when this message must be seen for this here we have right data parsley trigger a tribute is equal to key up so on key up event it will display validation message if value not come in between minimum and maximum range friends first we have refresh web page and now we want to check password length validation so here we have type only for character in password field then we can see invalid password validation message on web page now we have enter password with minimum 8 character and maximum 16 character after write this password validation message has been removed after we want to validate confirm password value must be matched with enter password value for this here we have right data parsley equal to attribute is equal to password field ID this attribute validates this field value match with value of password password field value not match with password field Bennet will display validation message on webpage now we want to display this validation message on which event for this year we have right data parsley trigger attribute is equal to key up event so when user typed something in confirm password field and value is not matched with password field then it will display validation message friends here we have refresh webpage and here in password field we have enter password text in password field and in confirm password field we have enter password 1 2 3 text after write this it has display confirm password value not match with password field so in confirm password field also we have write password so here validation message has been removed because both field value has been matched so this way we can validate confirm password value with password after this we want to validate website field to check this field value is URL or not so here we have right data parsley type attribute is equal to URL this attribute check this field value is proper URL or not if it is not proper URL then it will display validation message now we want to trigger this validation on which event so here we have right data parsley trigger attribute is equal to key up so when user type under this tag and it will check enter value is proper URL or not friends here first we have refresh webpage and after refresh of page here in website field we have typed something then it has display in valid URL validation message on web page now we have type proper URL like web's lesson dot info after type this in valid URL validation message has been removed from web page so this way we can validate URL using parsley JavaScript library lastly we want to validate user has accept terms and condition by check checkbox and for this validation we not want to write any attribute only required attribute is for validate this validation using parsley JavaScript library after all validation now we want to submit form if all data are proper and has been validated by using parsley Java Script library so for submit form using parsley Java Script here we have write dollar with form ID validate form with on method and under this we have write submit event so when form has been submitted this code will execute under this first we have right event dot preventdefault method this method will stop to submit form to server script below this we have write if statement and condition we have write dollar with form ID validate form with parsley method dot is valid method this method will return true if all form data has been validated using parsley javascript library under this block we have right ajax.request with first option URL and here we have right larval expression between this expression we have right root method and under this we have right form validation dot insert it will send request to insert method of form validation controller in second option we have right method and here we have used post method for send data to server in third option we have right data option and in this option we can define which data we want sent to server so here we have right dollar this with serialized method this method will convert form data into URL encoded string in fourth option we have write data type and here we can define in which data format we want to receive data so here we have defined JSON data type after this we have right before send callback function this function has been called before request sent to server under this function we have right dollar with submit button ID submit with attribute method with two argument like disabled and disabled this code will disabled submit button after click for prevent to insert single data multiple time below this we have write dollar with submit button ID submit with value method and under this we have write submitting this code will change submit button value before Ajax request send to PHP script in last Ajax option we have write success callback function this function has been called if request completed successfully then it will receive data from server which we can access from this data argument under this function first we have write dollar with form ID validate form with 0 index with reset method this code will clear all form field after this we have again right dollar with form ID validate form with parsley method dot reset method this code will remove all parsley JavaScript library format from form and form will be clean now we want to enabled submit button so here we have right dollar with submit button ID submit with attribute method with two argument in first argument we have right disabled and in second argument we have right false this code will enable submit button after this we want to reset submit button value to submit so here we have right dollar with submit button ID submit with value method and under this we have right submit it will reset submit button value to submit lastly we have right alert statement with data dot success argument this code will pop up value of data dot success argument on webpage now we have go to form validation controller and here we have makin cert method with request argument it will receive Ajax request for insert data under this we have write if statement and under condition we have write request method with Ajax method if it has received Ajax request then it will execute if block of code under this block we have right dollar data variable as equal to array in a ray first key we have right first name and value get from dollar request with get method and under this we have right first name it will fetch first name text-box value an array second key we have right last name and value get from dollar request with get method and under this we have right last name it will fetch last name text-box value in array third key we have right email and its value get from dollar request with get method and under this we have right email it will fetch email textbox value in array fourth key we have right password and its value get from dollar request with get method and under this we have right password it will fetch password text box value in array fifth key we have right website and its value get from dollar request with get method and under this we have right website it will fetch website textbox value now for insert data here we have right database class with table method and under this we have right register table after this here we have right insert method and under this we have right dollar data variable it will make insert query and insert data into register table now we have right return statement with response method with JSON method and under this we have written success key with data added it will send response to Ajax request in JSON format now we have check output in browser friends first we have refresh webpage and after refresh of web page we can see registration form on web page now we have directly click on submit button after click on submit button we can see validation message on web page so now we have right John one two three in first name field after right we can see validation message like invalid data so we have removed one two three and after this validation has been removed from first name field after this in last name field we have write Smith after fill data in this field then also validation message been removed from this field also now we have moved rightful details under email field so here we have type invalid email address in this field so here we can see invalid email format message on webpage so here we have write proper email and after write proper email validation message has been removed from this field also now in password field we have type only for character password then we can see validation message like password must be minimum 8 and maximum 16 character long so we have type simple password text in this field and validation message has been removed from this field after this in confirm password field we have typed password one two three then it has display validation message like confirm password is not match with password field so here we have removed one two three now both password and confirm password value has been match so validation message has been removed from this field same we weigh-in website field we have enter invalid website address so here we can see invalid url validation message so after this we have entered proper website address and after enter proper website address validation message has been removed from this field also now we have again click on submit button then here we can see terms and condition except field is required to check without check this field we cannot submit form so here we have accept this terms and condition and lastly we have click on submit button here all form field has been properly validated by using parsley javascript library and form data has been submitted to PHP script and we can see pop-up registration completed message on webpage so this way we can validate Louisville form by using parsley JavaScript library without write any line of code we have to write only data attribute in HTML field and that field data has been validated so this library has reduced form validation work of web developer if you have any query or input regarding this video tutorial please comment your query or input in comment box or if you like this video tutorial please share with your friends or even you can also share on social media also thanks for watching this video tutorial

Loading