Javascript 我想在字段为空或输入错误字段时使用红色边框验证表单字段

我想在字段为空或用户输入错误字段时使用红色边框验证此表单

我还想在字段无效时禁用submit按钮

请注意，还有其他非必填字段，如手机和电子邮件（可以稍后在“编辑用户详细信息”中提交）。虽然如果输入了错误的电子邮件，我也希望验证它

<form  action="" method="POST">
    <input type="date" name="date" placeholder="Registration Date" /></br>
    <input name="full_names" type="text" placeholder="Full names" /></br>
    <input name="mobile" type="text" placeholder="Mobile" /></br>
    <span>Select status </span>
    <select name="status">                                                            
        <option value="Paid">Paid</option>
        <option value="Unpaid">Unpaid</option>
    </select></br>

    <span>Select Chapter </span>
    <select name="chapter">                                                           
        <option value="Known">Known</option>
        <option value="Unknown">Unknown</option>
    </select></br>

    <span>Select Gender </span>
    <select name="gender">                                                            
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select></br>

    <input type="text" name="email" placeholder="Email Address" /></br>

    <textarea type="text" placeholder="Any Remarks" rows="2" name="remarks"></textarea></br>

    <button type="submit">Submit </button> 

</form>

选择状态
支付
不付报酬的


选择章节
已知的
不为人知


选择性别
男性
女性






提交

HTML5内置了很多这样的功能，具有

必需的

属性，并且能够提供regex

模式

属性进行验证。有些甚至是内置的，比如当您使用

type=“email”

属性而不是

type=“text”

时

使用HTML5验证+CSS3，您可以选择

：invalid

状态，并将样式应用于处于该状态的元素

虽然这不会将

禁用

状态应用于提交按钮，但如果验证失败，则不会提交表单

输入，
文本区{
保证金：5px0；
填充物：5px10px；
边框：1px实心#ccc；
边界半径：5px；
}
输入：无效，
选择：无效，
文本区域：无效{
边框颜色：红色；
}

选择状态
支付
不付报酬的


选择章节
已知的
不为人知


选择性别
男性
女性






提交

非常感谢@allicarn现在我一切都好了，谢谢堆栈交换！感谢会员的正确和帮助！如果这是你要找的，请将此标记为答案。很高兴我能帮忙：）