Custom JavaScript Validation for Forms

this article gives some examples for different ways to validate siteglide forms on the front end using javascript introduction when a user submits a form , we'll check that the user has filled in the fields correctly that additional processes like recaptcha, payment and secure zone sign up were successful for most errors, we'll provide a single error message which can be displayed for validation errors, we'll provide both the error message and additional messages for each missing field marking a field as required fields must be marked as "required" in the admin, and in the html of your form layout, in order for them to trigger the validation process for most fields, we will validate only whether or not a field has been submitted but for emails we take the extra step of checking whether or not the format of the email is valid you can either use siteglide's default validation message, or write your own custom javascript we'll also provide examples of how you can customise the error messages each provide to your users default for most error messages, the default behaviour will be to display an alert you can also use the following line of html in your form form layout file to output the default js validation error message at the end of your form but by default this will only display for validation type error \<div class="form error">\</div> a class of input error gets added to fields if they fail to validate, which you can select with custom css if you wish to show the user that they should be amended input error { border 1px solid red !important; } passing your custom function in as an argument you can write your own custom validation by changing \<button onclick="s form submit v2(this,'form 12');"> to be \<button onclick="s form submit v2(this,'form 12',error);"> where error is the name of your function e g \<button onclick="s form submit v2(this,'form 12',error);"> \<script> function error(error) { //sanitize the error message error = s error formatter(error); //display the error message alert(error); } \</script> formatting your error message as in the example above, a custom error function will always be passed the main error as its argument in the past, some of the integrations we worked with passed errors in different formats, which made writing error functions tricky we've improved this by adding a newfunction s error formatter(error); to sanitize the error message and return the message itself as a string this means if you include this helper function, you'll always know to expect the message in a string format example function custom error messages for fields the example below demonstrates the following displays all kinds of main error messages on the page does not use alert messages allows you to change the field validation message on a field by field basis in the html step 1) add html before closing {% endform %} tag \<div id="errorsummary" class="alert alert danger d none">\</div> step 2) add custom error messages to fields in html in our custom code for this example, let's invent a data attribute data custom msg to store custom error messages against the field we want to display them for step 3) add css the css plays a visual role here, but also a functional one as the boxes displaying the errors should be hidden when the form is submitting and the siteglide class can be used to select for this step 4) add javascript the first part of the function formats the main error message selects the form elements it needs deletes old error messages next the function loops over the fields with input errors and displays validation messages after adjusting for any custom messages you've added finally, the function uses a "switch" statement to change the main error message, should you wish (useful for translations) before displaying at the bottom of page see the comments in the code for more explanatory details function error(error) { //format the error message error = s error formatter(error); //select the key dom elements var standard errors = document queryselectorall(" input error\ not(\[data custom msg])"); var custom errors = document queryselectorall(" input error\[data custom msg]"); var old errors = document queryselectorall(" my input error"); var standard error message = "\<div class=\\"my input error alert alert warning\\">this field is required \</div>"; //delete old error messages for (e=0;e\<old errors length;e++) { old errors\[e] parentnode removechild(old errors\[e]); } //add standard field validation messages for (e=0;e\<standard errors length;e++) { var this error = standard errors\[e]; this error insertadjacenthtml("afterend", standard error message); } //add custom field validation messages for (e=0;e\<custom errors length;e++) { var this error = custom errors\[e]; var custom message = "\<div class=\\"my input error alert alert warning\\">"+this error getattribute("data custom msg")+"\</div>"; this error insertadjacenthtml("afterend", custom message); } //add main error summary from function argument this includes non validation errors if(error){ //add javascript logic here to replace specific error messages with your own text switch(error){ case "form submission error please fill in all required fields" //example of renaming a specific error add more cases for each error you wish to change error = "please fill in all required fields"; break; } //output the main error errorsummary classlist remove('d none'); errorsummary textcontent = error; } } related articles forms recaptcha