I want to validate 7 alphanumeric for 1 part of my form but it keeps telling me to follow the format even when I usepattern="[a-zA-Z0-9]".
Here is my code :
<div class="control-group form-group">
<div class="control">
<label for="admin">Admin Number:
<input type="text" class="form-control" id="admin" name="admin" placeholder="eg. 123456A" required pattern="\[a-zA-Z0-9]{7}"/>
</label>
</div>
</div>
and just asking but is it possible to validate radio box without javascript
I changed it to this and now it seems to be working:
<div class="control-group form-group">
<div class="control">
<label for="admin">Admin Number:
<input type="text" class="form-control" id="admin" name="admin" placeholder="eg. 123456A" pattern="[0-9A-Za-z]{7}"/>
</label>
</div>
</div>
Related
In my webapp i have made two <fieldset> one for four <input> fields and one for
checkboxes. Now i am using this parsely lib on these <fieldset> it is not working on it. but it works on othere pages that in which different fields have been made. now i don't know about this lib so much if it is work on checkboxes or not. and also i dont wanna apply parsely lib on these checkboxes.
So my question is :
why it does not work on given below code which is in my webapp it is
one page but on other page it works.?
Here's code:
<form id="form1" action="" method="POST" enctype="multipart/form-data" >
<input type="hidden" id="user_id" name="user_id" value="<?php echo empty($user_id)?"":$user_id;?>" />
<fieldset>
<legend>Basic Info</legend>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">First Name *</label>
<p id="validation"></p>
<input type="text" class="form-
control" id="fname" name="fname" value="<?php echo empty($fname)?"":$fname;?>"
placeholder="Enter First Name" data-type="alphanum" maxlength="45"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Last Name *</label>
<input type="text" class="form-control" id="lname" name="lname" value="<?php echo empty($lname)?"":$lname;?>" placeholder="Enter Last Name" data-type="alphanum" maxlength="45"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Email *</label>
<input type="text" class="form-
control" id="email" name="email" value="<?php echo empty($email)?"":$email;?
>"
placeholder="Enter Email" data-type="alphanum" maxlength="45"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Mobile #</label>
<input type="text" class="form-control" id="mobile" name="mobile" value="<?php echo empty($mobile)?"":$mobile;?>" placeholder="+55 99 99999999" data-type="alphanum" maxlength="45"/>
</div>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-md-6">
<div class="form-group">
<label for="status">Status</label>
<div>
<span class="text-muted m-l-5">InActive</span>
<input type="checkbox" data-render="switchery" id="status" name="status" data-theme="default" checked />
<span class="text-muted m-l-5">Active</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="status">All Permissions</label>
<div>
<span class="text-muted m-l-5">No</span>
<input type="checkbox" data-render="switchery" id="status" name="status" data-theme="default" checked />
<span class="text-muted m-l-5">Yes</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
Here for checkboxes
</fieldset>
I found the answer to my question. after spending an hour reading official docs.It says
Checkbox, radio and select multiple are a bit different than regular
input, textarea or simple select. They need to have either a name or
an id attribute to be correctly bound and validated by Parsley.
Otherwise, they will be ignored and a warning will be put in the
console.
I have a form where the user has to choose between two modes, with two individual sets of inputs. Some inputs are required.
<form>
<div class="form-group">
<label>This or that?</label>
<div class="controls">
<label class="radio-inline">
<input type="radio" name="thisthat" value="this">
This
</label>
<label class="radio-inline">
<input type="radio" name="thisthat" value="that" checked>
That
</label>
</div>
</div>
<div class="this"> <!-- hidden as the page loads -->
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some of this" />
</div>
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some more of this" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="This again" />
</div>
</div>
<div class="that">
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some of that" />
</div>
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some more of that" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="That again" />
</div>
</div>
<button class="btn btn-info" type="submit">Submit</button>
</form>
Example on CodePen
When the user fills out one part of the form the submit is prevented because of the empty fields in the other part.
How can I disable the validation for the fields in the hidden part? Preferably without removing the required properties of the hidden inputs.
Is there a default way to do this?
I want to disabled Proxy input field for selection till Attestor is selected , Currently both fields are readOnly, if attestor is not selected user should not be able to select Proxy. I am new to angularJS please help how we can implement this logic using ng-model.
main.html
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-click="openProxySearch()" readonly="readonly"/>
</div>
</div>
</div>
You can use the ng-disabled attribute.
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-click="openProxySearch()" readonly="readonly"
ng-disabled="!attestorDTO.attestorWorker"/>
Changing:
ng-disabled="!attestorDTO.attestorWorker"
to the condition that you want it to be disabled
Is there anyway I can create a form using bootstrap which can have fields aligned in same line as well as horizontal fields?
Something like this?
in this the cvv MM and YY are in the same line..How can i make it possible using bootstrap form?
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">CVV</label><input type="email" class="form-control" id="cvv" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I want the cvv to be aligned with the first form field
Wrap your input fields in a div and assign a col-sm-x class to it e.g:
<div class="form-group">
<label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
</div>
</div>
Also add a col-sm-x to your labels
For columns:
<div class="form-group">
<label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
Finally, class of form should be form-horizontal Play with the col width as you like
Wrap your input fields as above in one div but add to this div the 'form-inline' class. No need of the col-sm-x class.
<div class="form-group form-inline">
<label class="control-label">Expiry date(MM/YYYY) (required)</label>
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
I have made two forms for registering. When i add the code below to the page the second field automatically drops down below the first one. I would like it to go besides it.
<h1>Register</h1>
<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px">
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px">
here is an example of what it looks like in normal html (currently) and that is what i want it to look like. But in bootstrap it keeps taking new line
Reference the inline form styling on Bootstrap's site.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</form>
Alternatively, you can also use columns to put form elements next to one another:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>