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?
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?
Share Improve this question asked May 28, 2013 at 9:24 CoderCoder 7,07613 gold badges58 silver badges87 bronze badges 4- use event.preventDefault(); in function submitForm() – Anna.P Commented May 28, 2013 at 9:31
-
@Anna.P return false is enough.
event.preventDefault()makes no sense here! – Dhaval Marthak Commented May 28, 2013 at 9:32 -
@DhavalMarthak
return falsedoesn't work as you can see. Do i need to use what @Anna.P told? – Coder Commented May 28, 2013 at 9:34 -
@Anna.P where to use that function in
submitForm()? – Coder Commented May 28, 2013 at 9:35
1 Answer
Reset to default 1You 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