Validate form before submitting -JSP - javascript

in my JSP page i created a form,
<form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
action="genericDatabaseLoad" method="post" onsubmit="validateDBFom()">
<fieldset>
<input type="radio" name="connectionType" value="jdbcConnection"> <b><s:text name="global.genericdb_jdbc_connection" /></b>
<div class="dbConnection" id="jdbcConnection" style="display: none; position: relative; left: 30px;">
<div class="control-group">
<label class="control-label input-label" for="hostname"><s:text name="global.genericdb_hostname" /> :
<span class="requiredField"> * </span>
</label>
<div class="controls">
<input type="text" class="inputstyle" id="dbHostname" name="hostname" placeholder="<s:text name="global.genericdb_hostname" />" required="required" />
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="port"><s:text name="global.genericdb_port" /> :
<span class="requiredField"> * </span>
</label>
<div class="controls">
<input type="text" class="inputstyle" name="port" placeholder="<s:text name="global.genericdb_port" />" required="required" />
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="dbname"><s:text name="global.genericdb_databasename" />:</label>
<div class="controls">
<input type="text" class="inputstyle" name="dbname" placeholder="<s:text name="global.genericdb_databasename" />"
required="required" />
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="username"><s:text name="global.genericdb_username" /> :
<span class="requiredField"> * </span>
</label>
<div class="controls">
<input type="text" class="inputstyle" name="username" placeholder="<s:text name="global.genericdb_username" />" required="required" />
<label class="input-tip"><s:text name="global.genericdb_username_info" /></label>
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="password"><s:text name="global.genericdb_password" />:</label>
<div class="controls">
<input type="password" class="inputstyle" name="password" placeholder="<s:text name="global.genericdb_password" />" />
<label class="input-tip"><s:text name="global.genericdb_password_info" /></label>
</div>
</div>
</div>
<input type="radio" name="connectionType" value="jndiConnection"> <b><s:text name="global.genericdb_jndi_connection" /></b>
<div class="dbConnection" id="jndiConnection" style="display: none; position: relative; left: 30px;">
<div class="control-group">
<label class="control-label input-label" for="jndidbType"><s:text name="global.genericdb_jndi_databse" />:</label>
<div class="controls">
<select id="jndidbType" class="inputstyle" name="jndidbType">
<option value="oracle">Oracle</option>
<option value="sybase">Sybase</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="jndiConnectionString"><s:text name="global.genericdb_jndi_connection_string" />:</label>
<div class="controls">
<input type="text" class="inputstyle" name="jndiConnectionString"
placeholder="<s:text name="global.genericdb_jndi_connection_string" />" />
</div>
</div>
</div>
<div class="control-group" style="position: relative; top: 15px; left: 30px;">
<label class="control-label input-label" for="query"><s:text name="global.genericdb_query" /> :
<span class="requiredField"> * </span>
</label>
<div class="controls">
<textarea name="query" rows="4" placeholder="<s:text name="global.genericdb_query" />"
required="required" ></textarea>
<label class="input-tip"><s:text name="global.genericdb_query_info" /></label>
</div>
</div>
</fieldset>
</form>
As you can see there is no Submit button inside the form I am adding submit button outside of form.
<button type="submit" id="submitbtn" class="btn btn-primary inputstyle" onclick="submitForm();">SUBMIT</button>
So when I click on submit button, it will submit the form to struts action. JQuery is
JQuery is
<script>
function submitForm() {
var $submitform=$('#formId').val();
$('#'+$submitform).submit(); // $submitform is the id of the form.
}
</script>
Jquery to validate the form is
function validateDBFom()
{
var selectedVal = "";
var selected = $("input[type='radio'][name='connectionType']:checked");
if (selected.length > 0)
{
selectedValue = selected.val();
if(selectedValue=="jdbcConnection")
{
var $dbHostname=$("#dbHostname").val();
alert($dbHostname);
if($dbHostname==""||$dbHostname==null)
{
alert("Please fill host name");
return false;
}
}
}
else
{
alert("Please Select Connection Type.");
return false;
}
}
When I click on the submit button without selecting any radio button, it is displaying the correct message. That is, form validation is happening correctly. But if it return false also, the form is still submitting to action. What should I do to stay in the page without submitting if the validation function returns false?


You code is correct except this line
<form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
action="genericDatabaseLoad" method="post" onsubmit="validateDBFom()">
you should use
<form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
action="genericDatabaseLoad" method="post" onsubmit="return validateDBFom();">
Notice changes in onsubmit

Related

Jquery validation of fields

I am trying to validate the form using jquery but it's not working.
I am trying to show a red line on-field if it's empty on button click.
Below is the HTML code.
<div id="myModal" class="modal">
<div class="modal-content">
<div id="custom-form">
<div class="col-md-8">
<form name="addData" method="post" id="addData" class="form"
action="#"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?= $block->escapeHtmlAttr(__('Fill in the fields to place your order.')) ?></span></legend>
<fieldset class="fieldset row">
<div class="fields col-md-6">
<div class="field name required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Full Name')) ?></span></label>
<div class="control">
<input id="bnname" title="Name" value="" class="input-text" type="text" required="true" minlength="15">
</div>
</div>
<div class="field address required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Address')) ?></span></label>
<div class="control">
<input id="bnaddress" title="Address" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field city required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('City')) ?></span></label>
<div class="control">
<input id="bntext" title="City" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field telephone required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Telephone')) ?></span></label>
<div class="control">
<input id="bntelephone" title="Telephone" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
<div class="field postalcode required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Postal code')) ?></span></label>
<div class="control">
<input id="bnpostalcode" title="Postal code" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
</div>
</fieldset>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<div class="action submit primary buy" title="Order Now"><span><?= $block->
escapeHtmlAttr(__('Order Now')) ?></span></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I am not sure how to simply validate these fields using jquery.
Here is the jquery code
var isValid;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
});
is there any way we can add validation to it ?

Form not submit while change checkbox in php

In this code, what happens when I change checkbox value (i.e. If I click on credit card checkbox) then <div class="creditcard"> shows, and if I click on paypal then <div class="paypal"> shows.
Now, when I choose credit card and then click on submit button, then form does not submit. And if I check paypal checkbox and click submit button then nothing happen again. I don't understand why.
How can I submit form whether I choose credit card checkbox or paypal?
$(document).ready(function() {
$('input.payment').on('change', function() {
$('input.payment').not(this).prop('checked', false);
});
$("#credit").click(function() {
if ($(this).is(":checked")) {
$(".creditcard").show();
$(".paypal").hide();
} else {
$(".creditcard").hide();
$(".paypal").show();
}
});
$("#paypal").click(function() {
if ($(this).is(":checked")) {
$(".paypal").show();
$(".creditcard").hide();
} else {
$(".paypal").hide();
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input type="checkbox" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="checkbox" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" required value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" required/>
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>

You should be using radio buttons instead of checkboxes. I cleaned up your code also to use one event handler.
I also updated so the appropriate fields are dynamically set as required.
$(document).ready(function() {
$('input.payment').on('change', function() {
$("input[name='cardNumber']").prop("required",false);
$("input[name='paypal_email']").prop("required",false);
$(".creditcard").hide();
$(".paypal").hide();
if($(this).val() == "PayPal"){
$(".paypal").show();
$("input[name='paypal_email']").prop("required",true);
}
else{
$("input[name='cardNumber']").prop("required",true);
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>

How to add stateful button to a form

I have developed a form where I want to add Next button at the end of form for another form load without page loading. I am not able to achieve this target.
<form action="#" id="form_sample_1" class="form-horizontal form-bordered">
<div class="form-body">
<div class="form-group">
<label class="label1 col-md-4">Enter the name
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input id="templateName" type="text" name="name" data-required="1" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="label1 col-md-4">Enter Birth Year
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input id="admissionYear" type="date" name="name" data-required="1" class="form-control" maxlength="4" />
</div>
</div>
<div class="form-group">
<label class="label1 col-md-4">Select the type of room
<span class="required"> * </span>
</label>
<div class="col-md-7">
<select id="levelSelect" class="form-control" data-placeholder="Select" tabindex="1">
<option value="0" disabled selected default>--Select--</option>
<option value="AC">AC</option>
<option value="non-AC">non-AC</option>
</select>
</div>
</div>
<div class="form-group">
<label class="label1 col-md-4">Enter total number of room
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="room">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-4 col-md-3">
<button id="SubmitEligibility" type="button" class="btn blue">Save &#38 Continue</button>
</div>
</div>
</div>
</form>
After Save & Continue, I want to show some other form. Please advise me on how to do this.

You can create a new html button and associate them a script in js:
<button id="Next" type="button" onclick="nextFunction();">Next</button>
The js function is:
nextFunction(){
$('#form-group').hide();
$('#newForm').show();
}

how to validate two form of single page

I have Two Forms Here
First is here
<form class="form-horizontal form-signin" method="post" action="http://localhost:8080/job/create" id="submitUpdateProfileForm" >
<input type="hidden" name="actionType" value="updateJob" autocomplete="false" autofocus="false">
<div class="control-group">
<label class="control-label" for="txtJobId">Job Id</label>
<div class="controls">
<input type="text" id="txtJobId" name="txtJobId" placeholder="Job ID" value="18" readonly="readonly" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="txtJobName">Job Name</label>
<div class="controls">
<input type="text" id="txtJobName" name="txtJobName" placeholder="Job Name" value="" required />
</div>
</div>
<div class="control-group">
<label class="control-label" for="txtJobInstruction">Job Instruction</label>
<div class="controls">
<textarea id="txtJobInstruction" name="txtJobInstruction" placeholder="Job Instruction" required></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Create Quotation</button>
</div>
</div>
</form>
And Second Is Here
<form method="post" enctype="multipart/form-data" id="upload" action="http://localhost:8080/files/upload/">
<label for="users_file"> <strong><b> <font color="blue"> Please Select Image</font></b></strong>
<input type="file" name="users_file" id="users_file" accept="images/*" />
</label>
<div id="filedrag" style="padding: 28px;border: 2px dashed #000000;"> <strong><b><font color="blue">Or Drop Files Here</font></b></strong></div>
</form>
Question Is how to validate select image in create quotation? My problem is " this code create quotation without knowing image is uploaded or not"

If you want to say that the "create quotation" form should not be submitted if no files are selected in the "select image" of second form, then you can add onsumit attribute to your first form in this way
<form class="form-horizontal form-signin" method="post"
action="http://localhost:8080/job/create" id="submitUpdateProfileForm"
onsubmit="if (!document.getElementById('users_file').value.length>0){alert("Please upload a file!!");return false}else{return true}">
Here I am checking if the "users_file" input value is empty or not then submitting the form.
I hope this is what you were asking.

Form Validation With Bootstrap (jQuery)

Can someone please help me with this code? I am using bootstrap for the form and trying to validate it with jQuery. Unfortunately, the form validation isn't telling me what I'm doing wrong. I got the script from http://jqueryvalidation.org/documentation/ and followed a tutorial for client-sided validation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.validate.min.js"></script> //Script found online
<script>
$(document).ready(function(){
$('#contact-form').validate(
{
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
}); // end document.ready
</script>
</head>
<div class="hero-unit">
<h1>Contact Form</h1> </br>
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label class="control-label" for="subject">Subject</label>
<div class="controls">
<select id="subject" name="subject">
<option value="na" selected="">Choose One:</option>
<option value="service">Feedback</option>
<option value="suggestions">Suggestion</option>
<option value="support">Question</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-success">Submit Message</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>

I had your code setup on jsFiddle to try diagnose the problem.
http://jsfiddle.net/5WMff/
However, I don't seem to encounter your issue.
Could you take a look and let us know?
HTML
<div class="hero-unit">
<h1>Contact Form</h1>
</br>
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label class="control-label" for="subject">Subject</label>
<div class="controls">
<select id="subject" name="subject">
<option value="na" selected="">Choose One:</option>
<option value="service">Feedback</option>
<option value="suggestions">Suggestion</option>
<option value="support">Question</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-success">Submit Message</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
Javascript
$(document).ready(function () {
$('#contact-form').validate({
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
});

You can get another validation on this tutorial :
http://twitterbootstrap.org/bootstrap-form-validation
They use JQuery validation.
jquery.validate.js
jquery.validate.min.js
jquery-1.7.1.min.js
And you'll get the source code there.
<form id="registration-form" class="form-horizontal">
<h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2>
<div class="form-control-group">
<label class="control-label" for="name">Your Name</label>
<div class="controls">
<input type="text" class="input-xlarge" name="name" id="name"></div>
</div>
<div class="form-control-group">
<label class="control-label" for="name">User Name</label>
<div class="controls">
<input type="text" class="input-xlarge" name="username" id="username"></div>
</div>
<div class="form-control-group">
<label class="control-label" for="name">Password</label>
<div class="controls">
<input type="password" class="input-xlarge" name="password" id="password">
</div>
</div>
<div class="form-control-group">
<label class="control-label" for="name"> Retype Password</label>
<div class="controls">
<input type="password" class="input-xlarge" name="confirm_password" id="confirm_password"></div>
</div>
<div class="form-control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" class="input-xlarge" name="email" id="email"></div>
</div>
<div class="form-control-group">
<label class="control-label" for="message">Your Address</label>
<div class="controls">
<textarea class="input-xlarge" name="address" id="address" rows="3"></textarea></div>
</div>
<div class="form-control-group">
<label class="control-label" for="message"> Please agree to our policy</label>
<div class="controls">
<input id="agree" class="checkbox" type="checkbox" name="agree"></div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success btn-large">Register</button>
<button type="reset" class="btn">Cancel</button></div>
</form>
And The JQuery :
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/jquery.validate.js"></script>
<script src="script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function(){
$('pre').addClass('prettyprint linenums');
});
Here is the live example of the code:
http://twitterbootstrap.org/live/bootstrap-form-validation/
Check the full tutorial:
http://twitterbootstrap.org/bootstrap-form-validation/
happy coding.

Check this library, it's completable with booth bootstrap 3 and bootstrap 4
jQuery
<form>
<div class="form-group">
<input class="form-control" data-validator="required|min:4|max:10">
</div>
</form>
Javascript
$(document).on('blur', '[data-validator]', function () {
new Validator($(this));
});

Please try after removing divs from formor try to use onclick method on submit button.

Here is a very simple and lightweight plugin for validation with Boostrap, you can use it if you like:
https://github.com/wpic/bootstrap.validator.js

Categories

Resources