[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 383
  • Last Modified:

Validation for Required Fields with Dynamic Names Dynamic Required Yes/No

I have a form that has the fields coming from Custom Tags.  I have examples of the two types:
The first is a textarea.  The second is a radio button and I don't know how to show that it is required.  I'd like to somehow check that if they are required, on submit, it checks and if they are not filled out, it should throw an error message and highlight the field that is required and not filled out.  Thanks.

<TEXTAREA required=#iif(attributes.RequiredField EQ 0, de("yes"), de("no"))# cols="85" rows="7" name="#Attributes.ControlName#" id="txt.#Attributes.ControlName#">
#attributes.StoredValue#
</textarea>            

<TABLE class="evalradio">
                        <TR>
                        <th class="evalradio">Unsatisfactory</th>
                        <th class="evalradio">Needs Improvement</th>
                        <th class="evalradio">Meets Expectations</th>
                        <th class="evalradio">Exceeds Expectations</th>
                        <th class="evalradio">Far Exceeds Expectations</th>
                        </tr>
                        <TR>
            
                        <TD class="evalradio"><input type="Radio" name="#Attributes.ControlName#" value="0" <CFIF Attributes.StoredValue EQ 0>checked</cfif>></td>
                        <TD class="evalradio"><input type="Radio" name="#Attributes.ControlName#" value="1" <CFIF Attributes.StoredValue EQ 1>checked</cfif>></td>
                        <TD class="evalradio"><input type="Radio" name="#Attributes.ControlName#" value="2" <CFIF Attributes.StoredValue EQ 2>checked</cfif>></td>
                        <TD class="evalradio"><input type="Radio" name="#Attributes.ControlName#" value="3" <CFIF Attributes.StoredValue EQ 3>checked</cfif>></td>
                        <TD class="evalradio"><input type="Radio" name="#Attributes.ControlName#" value="4" <CFIF Attributes.StoredValue EQ 4>checked</cfif>></td>
                        </tr>
                        </table>
                        </cfoutput>
                        
0
YLaw
Asked:
YLaw
  • 6
  • 5
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
So the first
required="yes" will make CF validate it?
0
 
YLawAuthor Commented:
i thought if it has required=yes it gets validated.  so there may be 10 fields or 20 fields depending on what it pulls for that specific instance and all or none or some may be required.  
0
 
Michel PlungjanIT ExpertCommented:
Does CF add validation when you add required="yes" or is that just you wishing it to be so?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
_agx_Commented:
> Does CF add validation when you add required="yes" or is that just you wishing it to be so?

Afaik, CF won't do any validation unless you use CFFORM and CF form filelds like <cftextarea>  and <cfinput> (with the "required" attribute).
0
 
YLawAuthor Commented:
I am using CFForm and etc. but I want to get away from that...I need to somehow show that it's required so that's why I'm using it there.  I need to somehow query for those fields and check if they are filled in.
0
 
_agx_Commented:
> I am using CFForm and etc. but I want to get away from that.

Why?  The advantage of using CFFORM is that the validation (required fields, etc) is done automatically.  If you don't want to use CFFORM, then you'll have to write your own javascript code to do this on the client side, as well as any server side validation (if applicable).  While it is possible to write your own code, CFFORM would seem to be the simpler solution. Especially if you're using custom tags to dynamically generate form fields.



0
 
Michel PlungjanIT ExpertCommented:
Anyway

Method 1:

function validate(theForm) {
  for (var i=0; i < theForm.elements.length;i++) {
    var req = theForm.elements[i].getAttribute('required') ;
    if (req && req=="yes") {
       if (!testField(theForm.elements[i])) {
         alert(theForm.elements[i].getAttribute('errormessage');
         theForm.elements[i].focus();
         return false;
       }
    }
  }
  return true;
}

function testField(theField) { // test textfields and radios. Can be extended
  var theForm = theField.form;
  if (theField.type.indexOf('text')==0) {
    return (theField.value!="");
  }
  if (theField.type=="radio") {
    for (var i=0;i<theForm.elements[theField.name].length;i++) {
      if (theForm.elements[theField.name][i].checked) return true
    }
    return false
  }
  alert('Sorry no test yet for '+theField.type);
  return true
}


<TEXTAREA required="yes" errormessage="Please fill in manufacturer"...

<input type="radio" required="yes" errormessage="Please check a radio" name="rad1"><!-- only needed on the first of the set -->
<input type="radio" name="rad1">
<input type="radio" name="rad1">
0
 
YLawAuthor Commented:
mplungian - I think I'd like to follow this route, but when do i run this and how?
0
 
Michel PlungjanIT ExpertCommented:
Sorry, missed that.

<form onSubmit="return validate(this)" ... >

0
 
YLawAuthor Commented:
thanks, but it's not understanding textarea being required.
0
 
Michel PlungjanIT ExpertCommented:
I missed a ) after alert(.....errormessage') <<<<

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
<script>

function validate(theForm) {
  for (var i=0; i < theForm.elements.length;i++) {
    var req = theForm.elements[i].getAttribute('required') ;
    if (req && req=="yes") {
      alert('processing '+theForm.elements[i].name)
       if (!testField(theForm.elements[i])) {
         alert(theForm.elements[i].getAttribute('errormessage'));
         theForm.elements[i].focus();
         return false;
       }
    }
  }
  return true;
}

function testField(theField) { // test textfields and radios. Can be extended
  var theForm = theField.form;
  if (theField.type.indexOf('text')==0) {
    return (theField.value!="");
  }
  if (theField.type=="radio") {
    for (var i=0;i<theForm.elements[theField.name].length;i++) {
      if (theForm.elements[theField.name][i].checked) return true
    }
    return false
  }
  alert('Sorry no test yet for '+theField.type);
  return true
}
</script>
</head>
  <body>
<form onSubmit="return validate(this)">

<textarea required="yes" name="textarea1" errormessage="Please fill in manufacturer"></textarea>

<input type="radio" required="yes" errormessage="Please check a radio" name="rad1"><!-- only needed on the first of the set -->
<input type="radio" name="rad1">
<input type="radio" name="rad1">
<input type="submit">  
</form>
  </body>
</html>
0
 
YLawAuthor Commented:
there is no attribute for textarea required.  I think that's why I am running into a problem
0
 
Michel PlungjanIT ExpertCommented:
Sorry, I do not understand your comment
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now