javascript - Validate form before submitting -JSP - Stack Overflow

admin管理员组

文章数量:1024676

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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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?

• javascript
• jquery
• jsp
• validation

Share Improve this question Follow asked May 28, 2013 at 9:24 CoderCoder 7,0761313 gold badges5858 silver badges8787 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 false doesn'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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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

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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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?

• javascript
• jquery
• jsp
• validation

Share Improve this question Follow asked May 28, 2013 at 9:24 CoderCoder 7,0761313 gold badges5858 silver badges8787 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 false doesn'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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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

本文标签： javascriptValidate form before submitting JSPStack Overflow