Form Validation HTML5 + JavaScript + RegEx - Google Apps Script Web App Tutorial - Part 10

Learn how to add form validation (data validation) to your web app using HTML5, JavaScript & regular expression.
This is Part10 of Google Apps Script Web App Tutorial Series.

Support the Channel:

#webapp #validation

[fhozouri]

I am hooked to this channel.
Thank you very much.

[gilbertmengue]

Amazing videos. I am getting there to the 14-series goal.

[TheZlayMan]

select element validation fix:
<option value="" disabled selected>Choose your app</option>
also works in Chrome ;)

[lpanebr]

This series is great. One issue I haven't been able to workaround is redirect the user to another view after the form the row is added in the backend.

[ghanel]

Thanks for the videos

Have found that I need to set option = '' (option equals blank) for the default selected item on a select form item, or else it thinks that the value selected has data and therefore is valid.

<div class="row">
<div class="input-field col s12">
<select id="lm" required>
<option disabled selected value = ''>Select Line Manager</option>
<?!= names; ?>
</select>
<label>Who is this persons line manager?</label>
</div>

</div> <!-- close row --->

[dankonig]

Also curious how to get these messages to pop up where the fields are or in a more strategic place. Right now they just float around.

[PredragJokic]

Hello, thank you so very much for your knowledge and sharing. Lot of great stuff on you channels. I watched all the series hoping to find solution for my problem but you were all arround😂😂. In the part share more then one page there was details about changing the end of url in order to call another page but how can you call it from webapp directly through link or button. Actually script always return error.

[dankonig]

For some reason I get perfect validation for 5 fields in Firefox but in Chrome only one(the first one) in Chrome. Any ideas why?

[phrungzhu]

Thanks for the videos! Also, I don't know why the "required" and "pattern" are not working in my html file even if I added the <form> tag, how did you make it work? Thanks!
Edit: I found that the required works in <input> but not in <textarea>, could you please tell me how to make the "required" and "pattern" work in <textarea> as well? Thanks!

[harvinderdhami]

My button has a href, when the form is filled and the button is clicked it inserts data into the spreadsheet and then routes to a different view. How can I stop it from routing to a different view of validation fail? My validation is working as per the video. But it still goes to the different route/page?

[mathewcohen]

I want to validate a field and it can't be repeated. such as putting an unrepeatable consecutive number
as in sql the primary key, or an order number. I work with orders, and I need to be able to capture them without repeating them.
thanks

[penugondac]

Thank U!!! for such a nice way of explaining. Is there a way to get this webapp code to tryout..

[harvinderdhami]

This validation method does not seem to work on more than one field (chrome browser). Followed this tutorial and all is fine up until you make the check if valid function reusable. Please help find a solution?

[LufianCloud]

I got it all work out, except for the select tag. It doesn't shows the validity of it.

[rafaelwendel]

Hey, I was thinking about the safety of my users' input data. How can I make sure a mallicious person won't be able to access the data stored in my spreadsheet so I can protect my users?

[jeffstokes]

I am new to javascript and google scripts. If I wanted the submission to validate and then go to another page, but only if it was valid... How can I stop it from going to the next page if it isn't valid?

[MrJordiNL]

Thanks for these videos.
I have a problem however that when a button is pressed or Toasts appear on the screen, the button will stay pressed and the toast will remain on the screen. I have used the same code as you. Setting a displaylength for the toast does not make it go away. The only solution I can find to this problem is for people who have included materialize multiple times in their html, to remove the unneccessary ones. However I have only included the CDN once, just like you did in your third video of this series.

I hope anyone can provide me with a useful answer.
Thanks!

[adriallorens]

Hi,


First of all, thank you for keep uploading this Web App tutorials with google apps script.


Is there any way you could dynamically change the options for a select form ( I mean, in one of your videos, you use a for function to get data from a spreadsheet and use it to fill the options, but is there any way that, if the data in the spreadsheet changes, you can get the new data and update the values without reloading the page?)


Thank you, keep uploading these videos!!

[shareaspleased]

Thank you very much.

I want to know why the validation for "Select Option" did not work?

Thank you again for your great work.

[prakombimashindu]

why i need to add "<option value="" disabled selected> Choose your app</option>
", because if not, "Choose your app" is also a valid input too

or because I'm using windows? XD