...

View Full Version : Required Input Text Help



computerfan
07-21-2011, 08:37 PM
Currently I have several forms using the input text "field3".

I want to know how I can require an HTML input text field to be required WITHOUT having to use the form name in the javascript and without modifying <body>,<form> or <input type="submit">. Also no HTML5 since not all browsers use it (life would be simple if they did since threres a required tag)

So here is my form, for example


<form name = "test">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<input type="submit">
</form>

In otherwords, I can only edit <input type="text" name="field3"> by putting code directly before, in, or after that input field. With this problem, how can I make it required?

thank you

Old Pedant
07-22-2011, 01:07 AM
You can't.

If you could alter the <form> tag or the <input type="submit"> tag, you could.

Old Pedant
07-22-2011, 01:19 AM
No, maybe you can!

Assuming you can add either JS or HTML or a combo of both...



<form name = "test">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<input type="image" src="http://www.somesite.com/singlePixel.gif"
onload="this.form.onsubmit=function () { return validate(this); }"
style="visibility: hidden;" />
<script type="text/javascript">
function validate(form)
{
...any validation on form you want! ...
... return false to fail validation ...
... return true to succeed ...
}
</script>
<input type="submit">
</form>

Notice that the tiny image file used for the <input type="image" could be on any site. Use as small an image as you can find.

The "trick" is that by using an image we can also use onload for that image and then the onload can set up the validation on the <form> that holds the image button.

Old Pedant
07-22-2011, 01:21 AM
And I guess you could use document.write() from JavaScript to create the <input type="image"> so I guess you could indeed do it all with some embedded JS coding.

*** EDIT ***

I actually tried this with a simple test and a small image I had lying around:


<form name = "test">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<script type="text/javascript">
document.write('<input type="image" src="greenPixel.gif" '
+ ' onload="this.form.onsubmit=function() { return validate(this); }" '
+ ' style="visibility: hidden;" />');
function validate(form)
{
if ( form.field3.value == "" ) { alert("No field3 value"); return false; }
return true;
}
</script>
<input type="submit">
</form>

Notice that this code:
(1) Adds *ONLY* a <script>...</script> block to the existing code.
(2) Does *NOT* depend on knowing the name or id of the <form>.
(3) Does *NOT* depend on kinowing how many <form>s are on the page and/or which <form> this one is.

XterM
07-22-2011, 01:24 AM
using javascript to make it required but without using name of it form and no modification on input field. you could using form index.

basicaly, browser read any form in the body, and it is colleged object (such as array). for example, if in body there is 5 form, you can access each form by using form index.

forms[0], forms[1], forms[2], forms[3], forms[4]

so if in body just only one form, you can check your required field on forms[0].



function checkfield(){
var v = document.forms[0].field3.value;
if(v==''){
alert("field3 are required!");
return false;
}
}



hope it helps

Old Pedant
07-22-2011, 01:31 AM
XterM: Okay, now HOW do you force the browser to *CALL* your checkfield function when the form is submitted??

Without altering the <form> or <input type="submit"> tags? And without knowing the name or id of the <form> and without knowing if it is the only (or first) <form> on the page?

My way is sneaky, but it works. Can you come up with another?

And your code, even as it is, has to make an assumption. As you said: "...if in body just only one form..."

XterM
07-22-2011, 01:45 AM
XterM: Okay, now HOW do you force the browser to *CALL* your checkfield function when the form is submitted??

Without altering the <form> or <input type="submit"> tags? And without knowing the name or id of the <form> and without knowing if it is the only (or first) <form> on the page?

My way is sneaky, but it works. Can you come up with another?

And your code, even as it is, has to make an assumption. As you said: "...if in body just only one form..."

if some forms, need to know correct key of the form :D

hhhmmmm that my code need to modify <form> tag to handle onsubmit :D

so i try to test the code bellow, and it is no need to modify <form>


<?php if($_POST){ var_dump($_POST); } ?>
<body>
<form name="a" method=post>
<input type=text name=field3 /><input type=submit >
</form>
<script>
document.forms[0].onsubmit = function(){
if(document.forms[0].field3.value==""){
alert("field3 required");
return false;
}
}
</script>

computerfan
07-22-2011, 02:16 AM
beautiful, just beautiful.

http://www.vivandlarry.com/wp-content/uploads/2011/04/citizenkane.gif

i knew i came to the right place with this problem.

thank you XterM and Old Pedant. Both of your codes worked for me perfectly!

XterM
07-22-2011, 02:21 AM
you are welcome :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum