表单提交前验证异常：未通过验证即提交至数据库

你的问题核心在于表单的onsubmit事件需要依赖验证函数的返回值来阻止默认提交行为，而当前代码存在两个关键问题：一是onsubmit没有绑定return validate()，导致函数的返回值无法影响提交流程；二是验证逻辑里就算发现错误，也不会终止流程，甚至可能因为某一个字段验证通过就直接允许提交，忽略其他错误。

具体修改方案 #

1. 把表单的onsubmit属性改为return validate()，这样函数返回false时就能阻止表单提交
2. 在validate函数中，每发现一个验证失败的字段，立即弹出提示并返回false，终止后续验证和提交流程
3. 所有字段验证通过后，最后返回true允许表单提交

修改后的完整代码 #

<html> 
<head> 
<title>Ajax Form</title> 
<style> 
.right-align{ 
    position: absolute; 
    right: 70%; 
    text-align: left; 
} 
.select_country{ 
    position: absolute; 
    right: 70%; 
    width: 160.8px; 
    height: 22px; 
} 
</style> 
</head> 
<body> 
<form name="bhawesh" onsubmit="return validate()" method="post" action="formajaxsub.php"> 
NAME: <input type="text" name="name" class="right-align"><br><br> 
FATHER'S NAME: <input type="text" name="father" class="right-align"><br><br> 
E-MAIL:<input type="text" name="email" class="right-align"><br><br> 
CONTACT:<input type="text" name="contact" class="right-align"><br><br> 
COUNTRY: <select name="country" class="select_country" > 
<option value="">--Select--</option> 
<option value="ind">INDIA</option> 
<option value="eng">ENGLAND</option> 
<option value="chi">CHINA</option> 
<option value="aus">AUSTRALIA</option> 
</select><br><br> 
<input type="submit" Value="SUBMIT" name="submit"> 
</form> 
</body> 
<script> 
function validate() { 
    // 验证姓名（去除首尾空格后判断是否为空）
    var nameVal = document.forms["bhawesh"]["name"].value.trim(); 
    if (nameVal === "") { 
        alert("Enter the name"); 
        return false;
    } 

    // 验证父亲姓名
    var fatherVal = document.forms["bhawesh"]["father"].value.trim(); 
    if (fatherVal === "") { 
        alert("Enter the Father's name"); 
        return false;
    } 

    // 验证邮箱格式
    var emailVal = document.forms["bhawesh"]["email"].value.trim(); 
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(emailVal)) { 
        alert("The E-Mail is not OK"); 
        return false;
    } 

    // 验证联系电话（长度7-10位，且不能为空）
    var phoneVal = document.forms["bhawesh"]["contact"].value.trim(); 
    if(phoneVal === "" || phoneVal.length < 7 || phoneVal.length > 10) { 
        alert("Contact Number is not OK"); 
        return false;
    } 

    // 验证国家选择
    var countryVal = document.forms["bhawesh"]["country"].value; 
    if (countryVal === "") { 
        alert("Select the country"); 
        return false;
    } 

    // 所有验证通过，允许提交
    return true;
} 
</script> 
</html>

额外优化说明 #

• 给<option>补充了value属性（原来的name属性在<option>上无效，无法正确传递选中值）
• 用trim()处理输入值，避免用户输入空格导致的“非空”误判
• 把邮箱验证改为正则表达式，比原有的字符索引判断更严谨
• 调整手机号验证逻辑，先判断是否为空，再检查长度范围

内容的提问来源于stack exchange，提问作者Bhawesh Bhaskar