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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make fields mandatory on an existing form

    I have been given an html page with fields already set up but I now need to make these mandatory. Although I have found some code I cannot seem to implement it within my html.

    Below is a copy of the fields within the body of the text. I am assuming I need a script to put in the header but I am NOT a programmer/java script writer and this is all new to me

    I need the buttons to validate when clicking the Submit button.

    (Yes the site will actually be in Swedish....)

    <label class="field" for="first_name" >Förnamn</label><input id="first_name" maxlength="40" name="first_name" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="last_name">Efternamn</label><input id="last_name" maxlength="80" name="last_name" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="street">Gatuadress</label><textarea name="street"></textarea><br>
    <label class="field" for="CO_Address">c/o adress</label><textarea name="CO_Address"></textarea><br>
    <label class="field" for="Postnummer">Postnummer</label><textarea name="Postnummer"></textarea><br>
    <label class="field" for="city">Ort</label><input id="city" maxlength="40" name="city" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="state">Landskap</label><input id="state" maxlength="20" name="state" size="40" type="text" class="textbox=300"/><br>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,494
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function mandatory(frm){
     var ary=[['Förnamn','first_name'],['Efternamn','last_name'],['Gatuadress','street'],['c/o adress','CO_Address'],['Postnummer','Postnummer'],['Ort','city'],['Landskap','state']]
     var rtn=['Please Complete'],ip,z0=0;
     for (;z0<ary.length;z0++){
      if (frm[ary[z0][1]]&&frm[ary[z0][1]].value.replace(/\s/g,'')==''){
       rtn.push(ary[z0][0]);
      }
     }
     if (rtn[1]){
      alert(rtn.join('\n'));
      return false;
     }
     return true;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form onsubmit="return mandatory(this)" action="http://www.vicsjavascripts.org.uk/">
    <label class="field" for="first_name" >Förnamn</label><input id="first_name" maxlength="40" name="first_name" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="last_name">Efternamn</label><input id="last_name" maxlength="80" name="last_name" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="street">Gatuadress</label><textarea name="street"></textarea><br>
    <label class="field" for="CO_Address">c/o adress</label><textarea name="CO_Address"></textarea><br>
    <label class="field" for="Postnummer">Postnummer</label><textarea name="Postnummer"></textarea><br>
    <label class="field" for="city">Ort</label><input id="city" maxlength="40" name="city" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="state">Landskap</label><input id="state" maxlength="20" name="state" size="40" type="text" class="textbox=300"/><br>
    <input type="submit" name="" value="Submit" />
    </form>
    
    </body>
    
    </html>
    or

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .error {
      background-Color:red;
    }
    
    /*]]>*/
    </style><script type="text/javascript">
    /*<![CDATA[*/
    
    function mandatory(frm){
     var ary=[['Förnamn','first_name'],['Efternamn','last_name'],['Gatuadress','street'],['c/o adress','CO_Address'],['Postnummer','Postnummer'],['Ort','city'],['Landskap','state']]
     var rtn=['Please Complete'],ip,z0=0;
     for (;z0<ary.length;z0++){
      ip=frm[ary[z0][1]];
      if (ip){
       ip.className=ip.className.replace(' error','');
       if (ip.value.replace(/\s/g,'')==''){
        rtn.push(ary[z0][0]);
        ip.className+=' error';
    
       }
      }
     }
     if (rtn[1]){
      alert(rtn.join('\n'));
      return false;
     }
     return true;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form onsubmit="return mandatory(this)" action="http://www.vicsjavascripts.org.uk/">
    <label class="field" for="first_name" >Förnamn</label><input id="first_name" maxlength="40" name="first_name" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="last_name">Efternamn</label><input id="last_name" maxlength="80" name="last_name" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="street">Gatuadress</label><textarea name="street"></textarea><br>
    <label class="field" for="CO_Address">c/o adress</label><textarea name="CO_Address"></textarea><br>
    <label class="field" for="Postnummer">Postnummer</label><textarea name="Postnummer"></textarea><br>
    <label class="field" for="city">Ort</label><input id="city" maxlength="40" name="city" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="state">Landskap</label><input id="state" maxlength="20" name="state" size="40" type="text" class="textbox=300"/><br>
    <input type="submit" name="" value="Submit" />
    </form>
    
    </body>
    
    </html>
    or

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .error {
      position:absolute;width:20px;height:20px;color:red;
    }
    
    /*]]>*/
    </style><script type="text/javascript">
    /*<![CDATA[*/
    
    function mandatory(frm){
     var ary=[['Förnamn','first_name'],['Efternamn','last_name'],['Gatuadress','street'],['c/o adress','CO_Address'],['Postnummer','Postnummer'],['Ort','city'],['Landskap','state']]
     var rtn=['Please Complete'],ip,p,z0=0;
     for (;z0<ary.length;z0++){
      ip=frm[ary[z0][1]];
      if (ip){
       if (!mandatory[ary[z0][1]]){
        mandatory[ary[z0][1]]=document.createElement('DIV');
        mandatory[ary[z0][1]].innerHTML='**';
        mandatory[ary[z0][1]].className='error';
        document.body.appendChild(mandatory[ary[z0][1]]);
       }
       mandatory[ary[z0][1]].style.top='-3000px';
       if (ip.value.replace(/\s/g,'')==''){
        rtn.push(ary[z0][0]);
        p=pos(ip)
        mandatory[ary[z0][1]].style.left=p[0]+ip.offsetWidth+'px';
        mandatory[ary[z0][1]].style.top=p[1]+'px';
       }
      }
     }
     if (rtn[1]){
      alert(rtn.join('\n'));
      return false;
     }
     return true;
    }
    
    function pos(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    /*]]>*/
    </script></head>
    
    <body>
    <form onsubmit="return mandatory(this)" action="http://www.vicsjavascripts.org.uk/">
    <label class="field" for="first_name" >Förnamn</label><input id="first_name" maxlength="40" name="first_name" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="last_name">Efternamn</label><input id="last_name" maxlength="80" name="last_name" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="street">Gatuadress</label><textarea name="street"></textarea><br>
    <label class="field" for="CO_Address">c/o adress</label><textarea name="CO_Address"></textarea><br>
    <label class="field" for="Postnummer">Postnummer</label><textarea name="Postnummer"></textarea><br>
    <label class="field" for="city">Ort</label><input id="city" maxlength="40" name="city" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="state">Landskap</label><input id="state" maxlength="20" name="state" size="40" type="text" class="textbox=300"/><br>
    <input type="submit" name="" value="Submit" />
    </form>
    
    </body>
    
    </html>
    Last edited by vwphillips; 07-26-2013 at 04:56 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately this has not worked - nothing seems to happen when I click on submit - it just goes on to a blank page (which is what it did before)... I will have to pick this up on Monday but thank-you for the amazing quick response.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Be aware that anybody who decides to circumvent your efforts can turn off JavaScript in their browser and submit the form without your validation. You need to do that on the server side, i. e. with PHP/JSP/ASP.NET or whatever language you have at your disposal.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,895
    Thanks
    202
    Thanked 2,530 Times in 2,508 Posts
    <label class="field" for="street">Gatuadress</label><textarea name="street"></textarea><br>
    <label class="field" for="CO_Address">c/o adress</label><textarea name="CO_Address"></textarea><br>
    <label class="field" for="Postnummer">Postnummer</label><textarea name="Postnummer"></textarea><br>

    Why are you using textareas for these fields?

    Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space anid apostrophe.
    Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.


    Quizmaster: Trepanning is an old medical practice in which a hole is drilled in which part of the body?
    Contestant: The foot.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    [...]
    <br>
    [...]
    or

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    [...]
    <br>
    [...]
    or

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    [...]
    <br>
    [...]
    I tried to render these and got three yellow screens of death...
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Why are you still using transitional doctypes? HTML 4 and XHTML 1 were introduced in 1997 so unless you have thousands of web pages on the site you should have easily finished transitioning by now.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to make fields mandatory

    In answer to a couple of comments.

    1. I was given the HTML code and did not write it. I did not choose "textareas" as fields type - can these simply be changed to text fields?

    2. In terms of using "transitional doctypes" - again this was a page that has simply been given to me to incorporate into our own header and then to make the fields mandatory. I have incorporated them in by simply copying our header and then "pasting" in the page with the form fields.

    As I said I am a novice, so not even sure I understand no 2! Any further help would be gratefully received - but my technical responses may be limited.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,895
    Thanks
    202
    Thanked 2,530 Times in 2,508 Posts
    Your code needs a lot of re-working to bring it up to modern standards and include appropriate validation. It is useless to make a field compulsory unless at the same time the responses are tested to check they are sensible - not accepting First Name 276%897? or Postcode XXXXXXX for example. I suggest you ask your boss to assign this to a more experienced coder. Or hire a professional to do the work.

    As VIPStephan says, JavaScript form validation only provides convenience for users, not security. This means that JavaScript should be used as an "enhancement", not as a requirement. So your form should not be dependent on JavaScript alone to perform your validation. Instead, whatever server-side language you use to process the form (PERL, ASP, PHP, etc.) should also perform the same validation. Otherwise, people will be able to bypass your validation (and even possibly inject malicious code) simply by disabling Javascript.
    Last edited by Philip M; 07-29-2013 at 12:51 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    mandatory fields

    Thanks for the comments. It is not possible to pass to someone else or employ someone else. We are a charity and do not have the resources or time to have this re-written.

    The form data will be passed to someone else server side who is responsible for validating the data this is just to validate on the form the fields we want them to complete. We are not capturing any credit card info it is just a simple form asking for their information so we can send them some details. I understood this should be relatively straightforward to put in some checks against the required fields. I have changed the fields to text fields for the textareas (which I didn't like. I think the issue is I am not sure where to put the instruction to check the validation when clicking the submit button.

    I appreciate this must be frustrating for serious developers but sadly this is the situation organisations sometimes find themselves in. I am simply a "messenger" trying to translate the message.... thanks again

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,895
    Thanks
    202
    Thanked 2,530 Times in 2,508 Posts
    The code Vic Phillips gave you works for me - although it only checks for non-blank fields and can be defeated simply with a single letter or a ? Obviously you must change the form action to your own url.

    To please felgall change the DOCTYPE to <!DOCTYPE html>
    Last edited by Philip M; 07-29-2013 at 03:13 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by alex451 View Post
    I am simply a "messenger" trying to translate the message....
    Kill him!

    Nah, just kidding.
    Well, if you actually pass the form to someone for server-side processing, this is where the validation for “requiredness” has to be done (and yes, this also counts as “validation” in a technical sense). You tell the person who is responsible for validating the data that this and that form field are supposed to be required and they will put a check in there to test if the field has been filled out (after the form has been submitted) and take appropriate action if they are not (such as showing an error message).

    For the sake of fairness I’ll have to add that there is an attribute called “required” in new and upcoming HTML 5. So if you’re using this version of HTML you may add it; but browser support is not universal yet.

  • #13
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making fields mandatory

    For the purposes of what I need (which is to say this field is required) -

    Ha ha - beat you to it...... I have just discovered the wonderful simple way to add "Required" to the end of each line where I want the field to be completed...... two days of studying javascript... and one word does what I need!! I am now a happy girl - as is my manager...

    Thanks all for the help.....I may be back if they decide we need to do more than simply say "please complete this field"!!!

  • #14
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    AHHH no - the message is in English and I need it to be in Swedish.. Does anyone know where I would change the message (once I get the translation)

    <label class="field" for="first_name" >Förnamn</label><input id="first_name" maxlength="40" name="first_name" size="40" type="text" class="textbox=300" required/><br>

  • #15
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    That is a browser-internal setting, I suppose, and while there seem to be workarounds I’ll have to remind that the required attribute is not universally supported yet, so don’t rely on it either. I’ve created a relatively basic mockup that might work for your case, and it is also more semantic and more accessible.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title></title>
      <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <style type="text/css">
    /*<![CDATA[*/
    .message {
    	position: absolute;
    	top: -99999px;
    }
    .error ~ .message {position: static;}
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <form id="example" action="http://example.com">
    	<fieldset>
    	<div>
    		<label for="first_name">Förnamn</label>
    		<input id="first_name" maxlength="40" name="first_name" size="40" type="text" class="required"/>
    		<label class="message" for="first_name">Detta fält är obligatoriskt.</label>
    	</div>
    	<div>
    		<label for="last_name">Efternamn</label>
    		<input id="last_name" maxlength="80" name="last_name" size="40" type="text" class="required"/>
    		<label class="message" for="last_name">Detta fält är obligatoriskt.</label>
    	</div>
    	<div>
    		<label for="street">Gatuadress</label>
    		<textarea name="street" class="required"></textarea>
    		<label class="message" for="street">Detta fält är obligatoriskt.</label>
    	</div>
    	<div>
    		<label for="CO_Address">c/o adress</label>
    		<textarea name="CO_Address" class="required"></textarea>
    		<label class="message" for="CO_Address">Detta fält är obligatoriskt.</label>
    	</div>
    	<div>
    		<label for="Postnummer">Postnummer</label>
    		<textarea name="Postnummer" class="required"></textarea>
    		<label class="message" for="Postnummer">Detta fält är obligatoriskt.</label>
    	</div>
    	<div>
    		<label for="city">Ort</label>
    		<input id="city" maxlength="40" name="city" size="40" type="text" class="required"/>
    		<label class="message" for="city">Detta fält är obligatoriskt.</label>
    	</div>
    	<div>
    		<label for="state">Landskap</label>
    		<input id="state" maxlength="20" name="state" size="40" type="text" class="required"/>
    		<label class="message" for="state">Detta fält är obligatoriskt.</label>
    	</div>
    	</fieldset>
    	<div class="submit">
    	<input type="submit" name="" value="Submit" />
    	</div>
    </form>
    <script type="text/javascript">
    /*<![CDATA[*/
    	document.getElementById('example').onsubmit = function() {
    		var els = this.elements;
    		for(var i=0;i<els.length;i++) {
    			if(els[i].className.indexOf('required') === 0) {
    				els[i].className += ' error';
    			}
    		}
    		return false;
    	}
    /*]]>*/
    </script>
    </body>
    
    </html>
    I’ve put the actual script at the bottom of the page, that renders faster and is a little safer in terms of load event handling (nothing you haveworry about too much right now).

    Adjust your styling as necessary.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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