Hi,
i read this :
https://coursesweb.net/ajax/check-valida ... php-ajax_t
and i tried to copy it, i made simplified version here:
clinde.de/dump/crop.html
- "check.php" is present, but you can't see source of course, i copied it from tutorial.
This doesn't work. I don't know why it's working in your demo, but not in my version. I also tried to put it directly into my forms on other pages, but couldn't get it to work, so i made simplified version. I didn't read ALL of the text in your tutorial, I just copy/pasted most of script.
What's wrong? I can't see why it's not working? Am I the first trying this out? Could you write another demo of this? Any help?
I can't see a reason to use Ajax as well, it could be done only with JavaScript. Can't see a reason to use php for this. Could you explain?
thanks in advance,
crop
Validate Input Fields with Ajax
-
crop
- Posts: 3
Validate Input Fields with Ajax
MarPlo
Posts: 186
Hello,
1. The reason to use Ajax to check form fields input data it is that in this way you can check, for example the name and password with those registered into a database, without refreshing the page.
Of course, if you want to validate the input fields to check the number of characters or a regular expression you can use javascript only, or html5 items. Ajax is good in this case when you want to verify the input field value with same data stored on server, for example for a login form.
2. The script is not working in your version because you have javascript error in that page (check in console, with F12).
The error is because you have put the html form after the javascript code. When the javascript code is executed it not finds the needed html elements.
Try put the javascript at the end of the html body, before the closing </body> tag.
- In the page with the tutorial: "Check and Validate input field when loses focus, with PHP via Ajax" there is a download link (before the Demo) with the files from demo. Download it and see the code from "test.html".
1. The reason to use Ajax to check form fields input data it is that in this way you can check, for example the name and password with those registered into a database, without refreshing the page.
Of course, if you want to validate the input fields to check the number of characters or a regular expression you can use javascript only, or html5 items. Ajax is good in this case when you want to verify the input field value with same data stored on server, for example for a login form.
2. The script is not working in your version because you have javascript error in that page (check in console, with F12).
The error is because you have put the html form after the javascript code. When the javascript code is executed it not finds the needed html elements.
Try put the javascript at the end of the html body, before the closing </body> tag.
- In the page with the tutorial: "Check and Validate input field when loses focus, with PHP via Ajax" there is a download link (before the Demo) with the files from demo. Download it and see the code from "test.html".
crop
Posts: 3
Oh, thanks for quick reply.
When .onblur eventhandlers are executed there is no form at that point. Typical mistake, first things first.
Now it works, thanks a lot.
Ok, i have another issue with this script. When i type in the "name" field, the submit button stays disabled. That's ok, when i switch to "password" field, the submit button is no longer disabled. It should stay disabled until everything is filled properly. Sometimes everything is filled properly and it is still disabled, until i trigger .onblur. Maybe .onblur isn't the best eventhandler für this. What can i do to improve this? Use .onkeydown/up?
When .onblur eventhandlers are executed there is no form at that point. Typical mistake, first things first.
Now it works, thanks a lot.
Ok, i have another issue with this script. When i type in the "name" field, the submit button stays disabled. That's ok, when i switch to "password" field, the submit button is no longer disabled. It should stay disabled until everything is filled properly. Sometimes everything is filled properly and it is still disabled, until i trigger .onblur. Maybe .onblur isn't the best eventhandler für this. What can i do to improve this? Use .onkeydown/up?
MarPlo
Posts: 186
I improved the script, in this version the submit button is enabled when All the input fields are validated.
Also, the usage of the JavaScript object that validates the form fields is simplified, the "onblur" event is automatically registered.
- You can test and get the script from the page: https://coursesweb.net/ajax/check-valida ... php-ajax_t
I think the Keydown /keyup is not a good alternative for validating the field with Ajax because when you check the name /password with data stored on server it is needed the complete value, not to check the password for each sequence of characters, because it will be easily to crack.
Also, the usage of the JavaScript object that validates the form fields is simplified, the "onblur" event is automatically registered.
- You can test and get the script from the page: https://coursesweb.net/ajax/check-valida ... php-ajax_t
I think the Keydown /keyup is not a good alternative for validating the field with Ajax because when you check the name /password with data stored on server it is needed the complete value, not to check the password for each sequence of characters, because it will be easily to crack.
crop
Posts: 3
Still a problem, i type in values, but send button stays disabled until i trigger onblur. You also cannot hit <enter> to send formular.
MarPlo
Posts: 186
I replaced the "onblur" event with "onchange". Now, when ALL the input fields are validated, the submit button is enabled and the form is Automatically submited.