Javascript 提交前验证表单-JSP

在我的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>

---

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

除了这一行之外，您的代码是正确的

<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();">

---

注意submit中

的更改

使用event.preventDefault（）；在函数submitForm（）@Anna.P中，返回false就足够了<代码>事件.preventDefault（）在这里毫无意义@DhavalMarthak

返回false

无法正常工作。我需要使用@Anna.P告诉我的吗？@Anna.P在

submitForm（）

中在哪里使用该函数？

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

<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();">