This is the JS code that I have written →
function wvalidateForm(){
var guestName = document.forms["wcoform"]["guestname"];
if (guestName == "") {
var werrorMessage = document.getElementsByClassName("werrormsg");
werrorMessage.innerHTML = "No";
}
}
The HTML in question is here →
What I know a bit of JS I am trying to validate the form that should not submit unless fields are filled.
But even when guest name is empty The inner HTML is not updating as it was anticipated.
Get rid of the inline event attribute:
<!--<form ... id="wcoform" onsubmit="return wvalidateForm()">-->
<form ... id="wcoform">
and use JavaScript to properly handle the event instead.
document.getElementById("wcoform").addEventListener("submit", submitHandler);
The submitHandler function is where you prevent the default action of the form, get information from the event object if need be, and pass execution on to another function to do the actual work.
function submitHandler(evt) {
const form = evt.target;
evt.preventDefault();
validateForm(form);
}
And from there, the validateForm function receives a reference to the form, letting you easily do what needs to be done.
function validateForm(form) {
...
}
If validation is successful you can then call form.submit() to submit the form, and as it’s being called from within JavaScript, it won’t trigger the submit event once again.
We can also use AJAX also for form submission if needed, Right?
Ajax just means that you don’t get to immediately figure out if things are valid, and have to wait for another server somewhere else to do that instead.
None of that though changes any of the above process either.
There is a slight confusion →
<form class="wcoform" name="wcoform" id="wcoform">
Are good Now? or name attribute also needs to be removed?
Only the onsubmit part is to be removed. A way of gaining access to the form is required, which the identifier achieves well. The rest of what you had doesn’t need to change.
Sir,
submitHandler → This is a JQuery territory or we are still in the realm of pure JS?
submitHandler is pure JS. jQuery does things a little bit differently, but it still fundamentally achieves the same thing.
Finallly, we are here →
I hope I am right?
submitHandler is blocking the default submission of form. I believe validations will somehow return boolean: true or false.
even if any one validations fails - No submission, but when validations will be true. How can we instruct the form to be submitted?
We must return somehow true condition.
[quote=“codeispoetry, post:9, topic:337823, full:true”]
even if any one validations fails - No submission, but when validations will be true. How can we instruct the form to be submitted?[/quote]
When the validation is true, that’s when you call form.submit();
A typical way of doing this is to start with isValid being true, then check for things that need to be correct. Anything that’s not correct sets isValid to be false.
var isValid = true;
if (...) {
// show error message
...
// and then
isValid = false;
}
if (...) {
// show another error
...
// and then
isValid = false;
}
// and finally
if (isValid) {
form.submit();
}
Only if isValid remains true will the form be submitted.
Got it. I now have logical clarity to write something. I will get back to you once done or in any issue. Thanks for the guidance. You are wonderful sir. Thank you so much.
one last question for now →
var isValid = true; This to be inside any function?
1. submitHandler
2. wvalidateForm
Or we can declare it at start globally?
It’s best to keep it inside of the validate function. If anything needs information about what happened, that’s usually achieved by returning information from the function.
for example:
var result = validateForm(form);
Line 7 sends the form variable to the wvalidateForm() function, but look at line 11 - there is no parameter to bring in the form variable.
So right now, that form variable does not exist. That’s why it’s not defined.
when the guest name or first name is still not filled - This part should execute, but this is not executing →
var werrorMessage = document.getlementsByClassName("werrormsg");
werrorMessage.innerHTML = "No";
Is there any other event trigger we have to incorporate to make this work?
You’re defining the same variable in line 1 - why not make use of that? Also, with this setup, you’re not making use of the form variable you’re passing onto wvalidateForm() so what’s the point 
?
Look at this line very closely - it’s causing a syntax error.
Edit - then all you have to do is realize that the getElementsByClassName returns a node list, and you need to target the right error message to populate the message.
I got it now. It was a typo, not a logical mistake. el should be El
Sir, I am unable to get it. Can you please elaborate a bit more? I am a novice so please bear with me.
In the submit handler function the form is given as an argument to the validate function.
You should adjust the parameter list of the validate function so that it has form as one of the parameters that the function receives.