75
rated 0 times
[
79]
[
4]
/ answers: 1 / hits: 53880
/ 9 Years ago, mon, august 10, 2015, 12:00:00
I am using bootstrap in my web page and trying to make a form on that page.
I've used the standard classes of bootstrap for making the form. I've already used the validation to check the emptiness of the form. I just want to add the email and phone number validation further in my code.
The code for the form and the and the already declared validation script is given below:
<script type=text/javascript>
function validateText(id) {
if ($(# + id).val() == null || $(# + id).val() == ) {
var div = $(# + id).closest(div);
div.removeClass(has-success);
$(#glypcn + id).remove();
div.addClass(has-error has-feedback);
div.append('<span id=glypcn' + id
+ ' class=glyphicon glyphicon-remove form-control-feedback></span>');
return false;
} else {
var div = $(# + id).closest(div);
div.removeClass(has-error);
$(#glypcn + id).remove();
div.addClass(has-success has-feedback);
div.append('<span id=glypcn' + id
+ ' class=glyphicon glyphicon-ok form-control-feedback></span>');
return true;
}
}
$(document).ready(function() {
$(#contactButton).click(function() {
if (!validateText(contactName)) {
return false;
}
if (!validateText(contactEmail)) {
return false;
}
if (!validateText(contactMobile)) {
return false;
}
if (!validateText(contactAddress1)) {
return false;
}
if (!validateText(contactCity)) {
return false;
}
$(form#contactForm).submit();
}
);
});<form class=form-horizontal id=contactForm>
<div class=form-group>
<label for=contactName class=col-sm-2 control-label>Name<sup>*</sup></label>
<div class=col-sm-10>
<input type=text class=form-control id=contactName>
</div>
</div>
<div class=form-group>
<label for=contactEmail class=col-sm-2 control-label>Email<sup>*</sup></label>
<div class=col-sm-10>
<input type=email class=form-control id=contactEmail>
</div>
</div>
<div class=form-group>
<label for=contactMobile class=col-sm-2 control-label>Mobile
Number<sup>*</sup>
</label>
<div class=col-sm-10>
<input type=text class=form-control id=contactMobile>
</div>
</div>
<div class=form-group>
<label for=contactAddress1 class=col-sm-2 control-label>Address1<sup>*</sup></label>
<div class=col-sm-10>
<textarea class=form-control rows=5 id=contactAddress1></textarea>
</div>
</div>
<div class=form-group>
<label for=contactAddress2 class=col-sm-2 control-label>Address2</label>
<div class=col-sm-10>
<textarea class=form-control rows=5 id=contactAddress2></textarea>
</div>
</div>
<div class=form-group>
<label for=contactCity class=col-sm-2 control-label>City<sup>*</sup></label>
<div class=col-sm-10>
<select class=form-control id=contactCity>
<option>KURUKSHETRA</option>
<option>PEHOWA</option>
<option>KARNAL</option>
</select>
</div>
</div>
<div class=col-xs-12 col-lg-12 col-md-12 col-sm-12>
<p>
<span id=helpBlock class=help-block><sup>*</sup> marked fields
are compulsory!</span>
</p>
</div>
<div class=checkbox>
<label> <input type=checkbox> I agree to the <a href=#>Terms of
Service</a>
</label>
</div>
<div class=col-xs-12 col-lg-12 col-md-12 col-sm-12>
<center>
<p>
<button type=button class=btn btn-primary btn-lg btn-block
id=contactButton>
Submit <span class=glyphicon glyphicon-arrow-right> </span>
</button>
</p>
</center>
</div>
</form>
More From » jquery
