Google Sheets Userform - Add Basic Form Validation

[@nicksonbonke2608]

Pleas show us how to update the values in the form. CRUD. Thanks

[@66Komodo]

yes, that would be very helpful

[@alexlotion5055]

Does one need to type ( var myAlert =document.getElementById('errorNotification'); var bsAlert = new bootstrap.Toast(myAlert); bsAlert.show(); ) using Bootstrap 5, instead of ( $('#errorNotification').toast('show'); ) Or is there a shorter way?

[@zystx]

new bootstrap.Toast('#successNotification').show(); Works for me. Don't have to create variables to hold.

[@haihuynhthanh3078]

@@zystx thanks so much.

[@josephdriver160]

@@zystx legend

[@franciskunda3773]

You are the best.

[@igebaisa8113]

Hi there, I'm just curious, I had played around with the code and typed something like required-field in class instead of typing required. I tweaked the script in validation to this - function validateFields (){ var requiredFields = document.querySelectorAll ('.required-field'); return Array.prototype.every.call (requiredFields, function (el){ return el.value }); }; It gives me same result. This kind of script will have an issue in other browser?

[@ExcelGoogleSheets]

Should be fine.

[@ConsulthinkProgrammer]

Sir.. why that's both of notification div creating some empty space/margin below my form page when I first load it? And it's back to normal again after submit button clicked. But still, my toast error notification just to far from my button. What attribut or script could be to make that's empty space not happen to my form in the first load and my toast notification just near to my button with that toast script? my form: script.google.com/macros/s/AKfycbwQZp6mlh1pw48t76iezcDW-yZtdqT5BZIhjgASYcry1KnMymlc/exec

[@ExcelGoogleSheets]

add class "hide" to your toasts

[@ConsulthinkProgrammer]

Thanks Sir... I did it but still didn't work Sir..

[@ExcelGoogleSheets]

Not notifications, the actual toast element. BTW, you shouldn't have 2 divs with the same id.

[@ConsulthinkProgrammer]

Thanks Sir, looks like I made misscopied in that copy-paste job... My pardon, where I have to put that class="hide" in this sintaks Sir? Success Notifikasi × Data berhasil ditambahkan.

[@ExcelGoogleSheets]

atomic="true" class="toast hide" data-delay="4000">

[@kovuruswathi4993]

unable to get error MSG as toast in bootstrap 5. Can any body pls explain

[@ChukBartowski]

Anyone who has a validation script that doesn't work. This will work (watch the following video and you'll see why classList is here): function validate(){ var fieldsToValidate = document.querySelectorAll("#userform input"); var flag = 0; Array.prototype.forEach.call(fieldsToValidate, function(el){ if(el.checkValidity()){ el.classList.remove("is-invalid"); flag = flag+1; } else { el.classList.add("is-invalid"); } }); if (flag == 5) { //I have 5 required inputs. Change according to your required inputs return true; } return false; }

[@marcole1574]

Dear Sir, I do the same at the errorNotification process but the notification did not show up

[@2muchim4u]

I had the same problem

[@2muchim4u]

Did you get to work

[@marcole1574]

@@2muchim4u it stand still. i cannot find the problems

[@ikerson]

As @Nguyễn Thị Lan Anh, @Shon Daily, and @Marco Le have said, the Bootstrap 5 toasts documentation page has changed since this video was made. The code in the video AND the new code on the toasts page no longer works. I have searched for a solution, but yet to find one. If anyone solves the problem, please post it here. The help would be appreciated.

[@ikerson]

I figured out the problem. The current version of Bootstrap (as of January 2021) is 5.0.0-beta1, but this tutorial uses Bootstrap 4.4.1. So, in order to make the code -- $('#errorNotice').toast('show'); -- work use the old source code. To do this, replace the template code. Specifically, change the Bootstrap CSS and the JavaScript lines. Follow this link for more information: getbootstrap.com/docs/4.4/getting-started/introduction/

[@stefantivda7881]

My date entry field shows "dd-----yyyy". How can I change it to show dd/mm/yy for example?

[@josedejesusfragozolopez6396]

Estoy siguiendo los videos con interes, pero no puedo ver el siguiente ya que me dice "Video privado". Me puedes ayudar ???

[@MichaelKnichel]

So I seem to be having trouble getting the validation working. I have required in my text fields, but it doesn't trigger the notification at all unless the I change the div back to a form. Then it submits even though it failed the "required" test.

[@ExcelGoogleSheets]

Don't use the form tag. Please refer to this video for troubleshooting kzbin.info/www/bejne/nJ3bm2CHd5pjsNE

[@MichaelKnichel]

@@ExcelGoogleSheets Thank you for the reply. I am already familiar with the logging abilities. I was getting an error about toast not being a function. Turns out my screen was so small I couldn't tell the period in front of toast was actually a comma.

[@ExcelGoogleSheets]

console.log would have shown that error.

[@MichaelKnichel]

@@ExcelGoogleSheets It did, but I didn't see the comma vs period. Resolution too high.

[@ExcelGoogleSheets]

I see :)

[@michaelking9156]

Awesome video! Pls could you try something on Workflow Approval? There are hardly any tutorials on the web. Thanks in advance.

[@VUSDEdTech]

agreed. I'm about to need this functionality.

[@ConsulthinkProgrammer]

How to make radio button being required Sir? Where I have to put that "required" parameter?

[@ExcelGoogleSheets]

Just have one of them checked by default?

[@ConsulthinkProgrammer]

I mean, if I have 3 dots radio button (yes, no, maybe) for 1 label question: for example: do you interest? Yes No Maybe .. I want user can't go to send the data to my spreadsheet if one of that radio button in that question not checked/clicked Sir

[@aneeshtech416]

Thanks for this great tutorial🤗.Can we get script for searchable drop down list?

[@fdphy]

If you are using bootstrap, isn’t bootstrap validation function already built in? I thought bootstrap has that inbuilt.

[@ExcelGoogleSheets]

I suppose if you use an actual "form" tag it might be, I haven't tested it though, since I didn't use a form.

[@fdphy]

@@ExcelGoogleSheets Ah ok, I didn’t realised that. I have always used bootstrap with form tag

[@ExcelGoogleSheets]

It's best to use the form tag, but I knew there would be a lot of people that would not do preventDefault right and it would submit the form and send the page to nowhere.

[@VUSDEdTech]

Anyone looking for bootstrap datepicker here's a sample: First Day of Work I handled the new Date(dateValue) on server side functions and manipulated milliseconds and offset based on local time zone. Dates are annoying.

[@nguyenthilananh3784]

Now the toast show is changed. The new one is: toast.show() . I've tried it several times and that doesn't work. Please help me out here. Thank you very much

[@marcole1574]

hi e, tác giả trả lời code bị thay đổi rồi em ơi.thật tình cờ gặp ng vn ở đây :D

[@ikerson]

I figured out the problem. The current version of Bootstrap (as of January 2021) is 5.0.0-beta1, but this tutorial uses Bootstrap 4.4.1. So, in order to make the code -- $('#errorNotice').toast('show'); -- work use the old source code. To do this, replace the template code. Specifically, change the Bootstrap CSS and the JavaScript lines. Follow this link for more information: getbootstrap.com/docs/4.4/getting-started/introduction/

[@nguyenthilananh3784]

@@ikerson Yes, if we use the new css of ver 5.0, i use it and its work $('#errorNotification').toast('show');

[@nguyenthilananh3784]

@@marcole1574 Hi anh :D . How nice!.

[@hansgremmen8211]

@@ikerson Thanks a lot!!

[@ZahratAlafrah]

Hi please give me this sheet download link

[@martinluengas1457]

Hi CCC! when I add the validate function and call it in the "afterButtonClicked" function, the form stops working properly: the drop down menu is not populated and the button doesn't do anything. I posted the question on stackoverflow. I'll greatly appreciate your help stackoverflow.com/questions/64253159/how-can-i-add-validation-to-a-form-in-front-end-html-in-google-apps-script

[@cechett10]

I've responded your post on stackoverflow with a solution I have found.

[@HalaMohammed_83]

It's a great video. But unfortunately the toast message couldn't work with me.

[@raihannewaz125]

Please give me the sheet download link

[@cheewurz]

Wow!

[@josephdriver160]

for toast on 5.2.1 - new bootstrap.Toast('#successNotification').show();

[@ExcelGoogleSheets]

👍