How can the cfinput tag be set to validate the minimum input length? (E.g. To a minimum of 8 characters long)
Currently have:
<cfinput type="password" name="password " label="Password" required="yes"
message="Please Enter Your Password">
You can also use Regular Expression which will validate for a pattern with length between 8 and 16, allowing upper and lower case letters, numbers, periods, and underscores.
<cfinput type="password" name="password " label="Password" required="yes" validate="regex" pattern="^[a-zA-Z0-9._]{8,16}$" message="Please Enter Your Password">
<script>
function validatePassword(pass) {
//custom javascript code
alert(pass.length);
}
</script>
<cfform name="registration">
<cfinput id="password"
type="password"
name="password"
label="Password"
required="yes"
message="Please Enter Your Password"
onkeyup="javascript:validatePassword(this.value);" />
</cfform>
Or something like that... Just disable submit button until you get upto 8 chars, and/or display some red/green info etc...
Related
I have a form that has 3 rows. A checkbox and two input field per row.
The field names are paid, amount and tranid.
If I tick the checkbox on the second row, and enter data into the other two fields and click submit I have the following;
Listlen is 1.
listgetat(form.paid,1) contains the value assigned to the check box.
the list for amount are 0.00,16.00,0.00
The list for tranid id are "",Test123,"" (nul, value, nul)
Therein is my problem. I can't loop through the list because listlen = 1 and listgetat(form.amount,1) returns 0.00 because the data is in the second list item.
I can't get the value from listgetat(form.paid,2) because I only selected one checkbox, so listgetat(form.paid,1) contains that value.
Clearly my understanding of working with lists is lacking.
This is a payment processing page, where the user selects which outstanding payments have been paid. They enter a bank transaction ID and how much was paid. The number of rows depends on how many payments are outstanding, in this test case there are three.
Can someone please explain how to process the list.
thank you.
The input page; Select only unpaid transactions:
<cfquery name="unpaid" datasource="#Application.datasource#">
select * from payments where pflag=0
</cfquery>
The input page; The three relevant fields;
<cfif #unpaid.recordcount# gt 0>
<cfoutput query="unpaid">
<tr>
<td><span class="pagetext">
<input type="checkbox" name="paid" id="paid" value="#idpayments#" />
</span></td>
<td class="pagetext">#idpayments#</td>
<input name="tranid" type="text" id="tranid" size="15" maxlength="40" /></td>
<td align="right">
<span class="pagetext">$<input name="amount" type="text" id="amount" size="7" maxlength="7" value="#ap#" />
</span></td>
</tr>
<cfset total=#total#+#ep#>
</cfoutput>
</cfif>
The processing code..
<cfloop from="1" to="#Listlen(FORM.amount)#" index="i">
<cfif #ListGetAt(FORM.amount,i)# gt 0>
<!--- update the payment --->
<cfquery name="updtrec" datasource="#Application.datasource#">
update payments set pflag=1,
ap=#ListGetAt(FORM.amount,i)#,
datepaid='#newdate#',
<cfif #len(ListGetAt(FORM.tranid,i))# gt 0>, ptranid=#ListGetAt(FORM.tranid,i)#</cfif>
where idpayments=#ListGetAt(FORM.paid,i)#
</cfquery>
</cfif>
</cfloop>
A description of the issue is helpful, but you should also include some code along with it. The absolute smallest amount of code needed to illustrate the issue, omitting any irrelevant stuff like css. Here's a good example for this question:
<form ...>
Row #1
<input type="checkbox" name="paid" value="111">
Amount <input type="text" name="amount">
TransId <input type="text" name="transid">
<br>
Row #2
<input type="checkbox" name="paid" value="222">
Amount <input type="text" name="amount">
TransId <input type="text" name="transid">
<br>
Row #3
<input type="checkbox" name="paid" value="333">
Amount <input type="text" name="amount">
TransId <input type="text" name="transid">
</form>
Clearly my understanding of working with lists is lacking.
The problem isn't your understanding of lists, but of how form fields are handled. The code mistakenly assumes all three form variables will always contain a list of three values. They won't. While same name'd fields get converted into a comma separated list when submitted, not all form fields submit a value and some values are effectively discarded:
A checkbox only submits a value IF it's checked
An enabled text field always submits a value, but that value may be an empty string. Historically, most list functionality in CF ignores empty strings
So the form variables aren't guaranteed to always contain a list of three values. It may be less if some of the text fields are empty or boxes aren't checked (form.paid won't even exist at all if none of the boxes are checked). That's why the list functions aren't working as you expected.
Assuming you have a unique numeric value like an "id" for each row, give all checkboxes the same name and use the numeric id as the checkbox value. Then use the numeric "id" as part of the associated text field names, in order to group each row of fields together
<input type="checkbox" name="paid" value="111">
<input type="text" name="amount_111">
<input type="text" name="transid_111">
...
<input type="checkbox" name="paid" value="222">
<input type="text" name="amount_222">
<input type="text" name="transid_222">
...
When submitted, form.paid will contain a list of the selected id's. Loop through the list of id's and use the current "id" to extract the amount and transid values:
for (....) {
amount = form["amount_"& currentId];
transid = form["transid_"& currentId];
}
I'm trying to limit my text input to only allow letters, not numbers. With a maximum of 100 characters. I'm having trouble finding out how to use the pattern attribute to only allow letters. Here is a portion of my code attempting this.
<form action="http://www.severien.com/grit/formecho.php" method="post" target="_blank">
<label for="videorequests"> Video Requests:</label>
<input type="text" id="videorequests" name="videorequests" maxlength="100" pattern="[a-z]{1,100}" />
<input type="submit" value="Submit" class="submitbutton" />
</form>
Using the attribute maxlength I'm limiting the character input to 100. How do I use pattern to limit the character use to only letters, excluding numerical characters?
use this
pattern="[A-Z a-z]{1,100}"
In my Angular 2 application I have a component with a input field which is supposed to accept a range of numbers.
More specifically, 2 cases:
range 0[0]-23 (hours)
range O[0]-59 (minutes)
I am using
<form>
<input type="text" pattern="[0-9]"> <!-- 0-9 -->
<input type="text" pattern="\d|1\d|2[0-3]"> <!-- 0-23 -->
<input type="text" pattern="\d\d"> <!-- [0-99] -->
</form>
The issue is that I can basically input anything (as if validation was ignored), including text.
I don't think it's an issue related to Angular 2 since standard validation works, e.g.
<input type="number">
allows to input only numbers (but any number which is not what I want)
I also tried with min=0 and max=23 (or 59) attributes with type number but that doesn't work either.
<form>
<input type="number" min="0" max="9"> <!-- 0-9 -->
<input type="number" min="0" max="23"> <!-- 0-23 -->
<input type="number" min="0" max="99"> <!-- [0-99] -->
</form>
For future reference,
I solved by using Angular 2's FormBuilder as in:
ts
...
constructor(...
private formBuilder: FormBuilder);
timeForm: ControlGroup;
ngOnInit(){
let regexPatterns = {
// this can be improved
hours: "[0-2]?[0-9]?",
minutes: "[0-5]?[0-9]?"
};
this.timeForm = this.formBuilder.group({
hour: ['', Validators.pattern(regexPatterns.hours)],
minute: ['', Validators.pattern(regexPatterns.minutes)]
});
html
<form [ngFormModel]="timeForm">
<!-- additional validation (HTML 5) for 'required' -->
<input type="text" required ngControl="hour">
<input type="text" required ngControl="minute">
</form>
In HTML5:
How could I validate my input text , by a regular expression that the chain has at least 1 number ?
I'm looking for is that you can write anything but at least have a chain number written
<input type="password" name="pass" placeholder="Password" pattern="[0-9]+" required>
Thanks
I think below code will help you to solve your problem
<input type="text" name="country_code" pattern="^\d{1,}$"/>
pattern=".*\d.*"
which means
Any number of characters, then a digit, then any number of characters.
with javascript/jquery, e.g.
<input id="test"/>
$('#test').on('change',testme);
function testme(e) {
if ( e.target.value.match(/[0-9]+/) ) {
alert('yay!');
}
}
for the pattern property:
<input class="span2" type="password" name="pass" placeholder="Password" pattern=".*[0-9]+.*" required>
I have a form in ColdFusion that initially has 5 input fields for file uploading. Should the user realize they have more than 5 files to upload in the process of attaching them, I would like the form to preserve the values when it submits itself for the change in # of fields.
Using the <cfform> tag with the preservedata="yes" attribute is supposed to accomplish this - but all I'm getting is a temp value stored in the input's value on resubmit that isn't displayed in the field nor works for a submission.
edit: Thanks for the great answers everyone, you all helped and were correct. I was able to implement Adam's suggested solution. Works great! Thanks!
function changeFieldCount() // javascript function for submit on input count change
{
var count = document.forms[0].numtotal.options[document.forms[0].numtotal.selectedIndex].value;
document.forms[0].action = "me.cfm?count=" + count;
document.forms[0].submit();
}
<cfparam name="url.count" default="5">
<cfform name="dispfiles" method="post" enctype="multipart/form-data" preservedata="yes">
<!--- looping for file input fields --->
<cfloop index="counter" from="1" to="#url.count#">
<cfinput type="file" name="file#counter#" size="50" maxlength="60"><br>
</cfloop>
<br>Number of Files to Attach:
<!--- looping for # of input selection--->
<cfselect name="numtotal">
<cfloop index="cnt" from="1" to="20" step="1">
<cfoutput>
<option value="#cnt#" <cfif #cnt# eq #url.count#>selected</cfif>>
#cnt#
</option>
</cfoutput>
</cfloop>
</cfselect>
<cfinput type="button" name="op-display" value="Display" onclick="changeFieldCount()">
<cfinput type="button" name="op-upload" value="Attach Files" onclick="submitfrm(this.form)">
<cfinput type="button" name="cancel" value=" Cancel " onclick="window.close()">
</cfform>
This is what I'm getting when I view source on the resulting submission:
<input name="file1" id="file1" type="file" value=".../cfusion.war/neotmp8858718543274653167.tmp" maxlength="60" size="50" /><br>
This is by design in all browsers for security reasons. There is no way you can insert the value for a file field.
To elaborate on #SpliFF's answer, what you need to do is dynamically create more file fields with JavaScript.
Here's an example that uses jQuery to make the JavaScript a little easier. I've also used a variable to track the number of file fields displayed so that they all have a unique number appended to their names, making it possible to loop over and uniquely identify them server-side.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//track the current number of file fields displayed
var numUploadFields = 5;
//attach an anonymous function to the button to add more fields
$(function(){
$("#add5").click(function(){
for (var i = 0; i < 5; i++){
numUploadFields += 1;
var newHTML = "<br/><input type='file' name='upload" +
numUploadFields + "' />";
$("#someSection").append(newHTML);
}
});
});
</script>
<form method="post" action="">
<div id="someSection">
<input type="file" name="upload1" /><br/>
<input type="file" name="upload2" /><br/>
<input type="file" name="upload3" /><br/>
<input type="file" name="upload4" /><br/>
<input type="file" name="upload5" />
</div>
<input type="button" id="add5" value="Add 5 more file fields" />
</form>
Build additional file inputs using JS DOM methods. Since you aren't leaving the page this is fast and nothing is lost.