Menu icon Foundation
Abide validation confusion

Hi, I have a very simple form I'm attempting to validate with Abide (using Foundation 5). The form has first name, last name, and dollar amount fields.

I'd like to validate the name fields for non-numeric characters only, and I've attempted to use both a predefined pattern="alpha" attribute as well as pattern="[a-zA-Z]+". For both fields, entering a string with both characters and numbers is being allowed (for example, "name123" is accepted), which I don't understand.

Similarly, for the dollar amount field, I'd like to simply validate for whole numbers only. Attempts to do this with both pattern="number" and pattern="[0-9]+" don't appear to be functioning, as they both allow a decimal point as well as non-numeric characters (for example "123." or "123a").

I've gone over the Abide docs, and tested these regular expressions, and am apparently missing something here. Any help would be appreciated. Code included below as well.

<form id="captain_pay" action="cc-preload.asp" method="post" data-abide>
	<fieldset>
	<legend>Billing Information</legend>
	
	<div class="row">
		<div class="large-4 medium-4 columns">	 
			<label>First name (as it appears on credit card):</label>
			<input type="text" id="billTo_firstName" name="billTo_firstName" required pattern="alpha" />
			<small class="error">Your first name is required.</small>
		</div>
		
		<div class="large-4 medium-4 columns">
			<label>Last name (as it appears on credit card):</label>
			<input type="text" id="billTo_lastName" name="billTo_lastName" required pattern="[a-zA-Z]+" />
			<small class="error">Your last name is required.</small>
		</div>
		
		<div class="large-2 medium-2 left columns">
			<label>Payment amount:</label>
			<input type="text" id="amount" name="amount" required pattern="[0-9]+" />
			<small class="error">Please enter a whole dollar amount</small>
		</div>
	</div>
	
	<div class="row">
		<div class="large-4 medium-4 left columns">
			<input type="submit" value="Continue >>" class="button radius" />
		</div>
	</div>
						
	</fieldset>
				 
</form>
            

         

abidevalidation

Hi, I have a very simple form I'm attempting to validate with Abide (using Foundation 5). The form has first name, last name, and dollar amount fields.

I'd like to validate the name fields for non-numeric characters only, and I've attempted to use both a predefined pattern="alpha" attribute as well as pattern="[a-zA-Z]+". For both fields, entering a string with both characters and numbers is being allowed (for example, "name123" is accepted), which I don't understand.

Similarly, for the dollar amount field, I'd like to simply validate for whole numbers only. Attempts to do this with both pattern="number" and pattern="[0-9]+" don't appear to be functioning, as they both allow a decimal point as well as non-numeric characters (for example "123." or "123a").

I've gone over the Abide docs, and tested these regular expressions, and am apparently missing something here. Any help would be appreciated. Code included below as well.

<form id="captain_pay" action="cc-preload.asp" method="post" data-abide>
	<fieldset>
	<legend>Billing Information</legend>
	
	<div class="row">
		<div class="large-4 medium-4 columns">	 
			<label>First name (as it appears on credit card):</label>
			<input type="text" id="billTo_firstName" name="billTo_firstName" required pattern="alpha" />
			<small class="error">Your first name is required.</small>
		</div>
		
		<div class="large-4 medium-4 columns">
			<label>Last name (as it appears on credit card):</label>
			<input type="text" id="billTo_lastName" name="billTo_lastName" required pattern="[a-zA-Z]+" />
			<small class="error">Your last name is required.</small>
		</div>
		
		<div class="large-2 medium-2 left columns">
			<label>Payment amount:</label>
			<input type="text" id="amount" name="amount" required pattern="[0-9]+" />
			<small class="error">Please enter a whole dollar amount</small>
		</div>
	</div>
	
	<div class="row">
		<div class="large-4 medium-4 left columns">
			<input type="submit" value="Continue >>" class="button radius" />
		</div>
	</div>
						
	</fieldset>
				 
</form>
            

         
Rafi Benkual over 5 years ago

Hi,
*for the alpha field, using this works
alpha: /[a-zA-Z]+$/,

*To use letters and numbers, this works
alpha_numeric : /[a-zA-Z0-9]+$/,

To validate for integer only, this works
integer: /\d+$/,

The alpha makes more sense to be be more strict like the solution provided. We made this change and it will be part of Foundation 5.1 which is being released at the end of the month.

Andrew McMillan over 5 years ago

That response seems to be using the override mechanism where you define the patterns differently in the .js when you init abide and foundation. I think he was originally asking about what I'm also seeing, which is that inline pattern evaluation of the regular expression doesn't seem to be working. I can do something like this:

...and it seems to be completely disregarded.

What's the solution if you want to just put inline attribute validation patterns? Nothing ever seems to happen... :(

Thanks!