在提交之前验证表单 -JSP

Question

在我的 JSP 页面中，我创建了一个表单，

<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>

如您所见，表单内没有提交按钮，我在表单外添加提交按钮。

<button type="submit" id="submitbtn" class="btn btn-primary inputstyle" onclick="submitForm();">SUBMIT</button>

所以当我点击提交按钮时，它会将表单提交给 struts 动作。 jQuery是

JQuery 是

<script>
        function submitForm() {
            var $submitform=$('#formId').val();
            $('#'+$submitform).submit(); // $submitform is the id of the form.
            }
</script>

Jquery 验证表单是

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;
        }   
    }

当我单击提交按钮而不选择任何单选按钮时，它会显示正确的消息。也就是说，表单验证正在正确进行。但如果它也返回 false，则表单仍在提交操作。如果验证函数返回false，我应该怎么做才能留在页面而不提交？

Answer 1

你的代码是正确的，除了这一行

<form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
            action="genericDatabaseLoad" method="post" onsubmit="validateDBFom()">

你应该使用

<form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
            action="genericDatabaseLoad" method="post" onsubmit="return validateDBFom();">

注意onsubmit的变化