I took the following code of the net that will allow me to use validation when fields are empty and when browser does not support html5. However, there are couple of issues:
(1) The alert box does not show the field name, rather something like ctl00$ContactUsName. How would I get just field name? In fact, instead of alert box how could I get the field (text box) to have focus and the field border highlighted?
(2) Why does the code not work for Safari? It works for IE.
<script type="text/javascript">
window.onload = function () {
// get the form and its input elements
var form = document.forms[0],
inputs = form.elements;
// if no autofocus, put the focus in the first field
if (!Modernizr.input.autofocus) {
inputs[0].focus();
}
// if required not supported, emulate it
if (!Modernizr.input.required) {
form.onsubmit = function () {
var required = [], att, val;
// loop through input elements looking for required
for (var i = 0; i < inputs.length; i++) {
att = inputs[i].getAttribute('required');
// if required, get the value and trim whitespace
if (att != null) {
val = inputs[i].value;
// if the value is empty, add to required array
if (val.replace(/^\s+|\s+$/g, '') == '') {
required.push(inputs[i].name);
}
}
}
// show alert if required array contains any elements
if (required.length > 0) {
alert('The following fields are required: ' +
required.join(', '));
// prevent the form from being submitted
return false;
}
};
}
}
</script>
validateForm()
Dont call it 2 times, theres no need of calling that at submit button, just call it at form tag. <form id="Form1" onsubmit="return validateForm()" runat="server">
and define that function within master page at header section, but not in content page.
dm007
Member
47 Points
106 Posts
html field validation
Dec 24, 2012 10:36 PM|LINK
I took the following code of the net that will allow me to use validation when fields are empty and when browser does not support html5. However, there are couple of issues:
(1) The alert box does not show the field name, rather something like ctl00$ContactUsName. How would I get just field name? In fact, instead of alert box how could I get the field (text box) to have focus and the field border highlighted?
(2) Why does the code not work for Safari? It works for IE.
<script type="text/javascript"> window.onload = function () { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function () { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } </script>roopeshreddy
All-Star
20143 Points
3327 Posts
Re: html field validation
Dec 25, 2012 05:27 AM|LINK
Hi,
Since you are updating the array with the values of NAME attribute of the HTML controls!
Regarding Safari, did you check the Console for errors? You can enable Developer Options from the Settings!Hope it helps u...Roopesh Reddy C
Roopesh's Space
raju dasa
Star
14392 Points
2447 Posts
Re: html field validation
Dec 26, 2012 05:29 AM|LINK
Hi,
Instead of:
try like this:
var form = document.getElementsByTagname("form")[0], inputs = getElementsByTagname("input");rajudasa.blogspot.com || blog@opera
dm007
Member
47 Points
106 Posts
Re: html field validation
Dec 27, 2012 04:24 PM|LINK
Thanks for replies. Two errors:
(1)
Line: 99
Error: Object doesn't support property or method 'getElementsByTagname'
(2)
Line: 39
Error: Unable to get value of the property 'length': object is null or undefined
For the first error I noticed many people have resolved that with updating their jquery version, but it doesn't seem to work for me. any advice?
roopeshreddy
All-Star
20143 Points
3327 Posts
Re: html field validation
Dec 27, 2012 04:29 PM|LINK
Hi,
It's spell error - getElementsByTagName
N should be capital in Name!
http://www.w3schools.com/jsref/met_doc_getelementsbytagname.asp
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
dm007
Member
47 Points
106 Posts
Re: html field validation
Dec 27, 2012 04:51 PM|LINK
Thanks bro! Different error now - Error: 'getElementsByTagName' is undefined
var form = document.getElementsByTagName("Form1")[0], inputs = getElementsByTagName("input");
I am a bit confused how the above code is structured. inputs isn't declared anywhere...
roopeshreddy
All-Star
20143 Points
3327 Posts
Re: html field validation
Dec 27, 2012 05:48 PM|LINK
Hi,
Did you have used ASP.NET Textboxes? If yes, then it is rendered as
So, it will work!
Did you tried this -
var inputs = document.getElementsByTagName("input");Hope it helps u...
Roopesh Reddy C
Roopesh's Space
dm007
Member
47 Points
106 Posts
Re: html field validation
Dec 27, 2012 06:53 PM|LINK
they are html textboxes...my markup is
<div id="contactusform"> <fieldset> <legend> <h3> Contact form</h3> </legend> <p class="first"> <label for="name"> Name</label> <input type="text" name="name" id="name" runat="server" size="30" required /> </p> <p class="submit"> <input type="submit" value="ENTER" onsubmit="return validateForm()" /> <%-- <input type="submit" value="Submit" />--%> </p> </fieldset> </div>Yep - i did set input to a variable. The error now is 'validateForm' is undefined. This is in my masterpage by the way.
<form id="Form1" onsubmit="return validateForm()" runat="server">
roopeshreddy
All-Star
20143 Points
3327 Posts
Re: html field validation
Dec 28, 2012 04:11 AM|LINK
Hi,
Where you defined the validateForm() function?
Are you using any Validations plugins? Can you post the complete code - Master Page + Content Page and Javascript functions you are using!
If it's not possible, try to create a sample web app and demostrate your scenario!
Roopesh Reddy C
Roopesh's Space
raju dasa
Star
14392 Points
2447 Posts
Re: html field validation
Dec 28, 2012 04:44 AM|LINK
Hi,
validateForm()
Dont call it 2 times, theres no need of calling that at submit button, just call it at form tag.
<form id="Form1" onsubmit="return validateForm()" runat="server">
and define that function within master page at header section, but not in content page.
rajudasa.blogspot.com || blog@opera