Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Required Input Text Help

    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

    Code:
    <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
    Last edited by computerfan; 07-21-2011 at 08:43 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,184
    Thanks
    80
    Thanked 4,451 Times in 4,416 Posts
    You can't.

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

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,184
    Thanks
    80
    Thanked 4,451 Times in 4,416 Posts
    No, maybe you can!

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

    Code:
    <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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,184
    Thanks
    80
    Thanked 4,451 Times in 4,416 Posts
    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:
    Code:
    <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.
    Last edited by Old Pedant; 07-22-2011 at 01:36 AM.

  • Users who have thanked Old Pedant for this post:

    computerfan (07-22-2011)

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Kediri - Indonesia
    Posts
    61
    Thanks
    2
    Thanked 19 Times in 19 Posts
    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].

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

    hope it helps

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,184
    Thanks
    80
    Thanked 4,451 Times in 4,416 Posts
    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..."

  • #7
    New Coder
    Join Date
    Jul 2011
    Location
    Kediri - Indonesia
    Posts
    61
    Thanks
    2
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by Old Pedant View Post
    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

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

    so i try to test the code bellow, and it is no need to modify <form>
    Code:
    <?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>

  • Users who have thanked XterM for this post:

    computerfan (07-22-2011)

  • #8
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    beautiful, just beautiful.



    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!

  • #9
    New Coder
    Join Date
    Jul 2011
    Location
    Kediri - Indonesia
    Posts
    61
    Thanks
    2
    Thanked 19 Times in 19 Posts
    you are welcome


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •