【发布时间】：2020-10-18 13:12:40
【问题描述】：
美好的一天。我对 JavaScript 和 JQuery 很陌生，我正在尝试使用 JQuery 向某些表单字段添加一种验证形式。
我写了一个条件语句，如果 FULL NAME 字段为空或小于 6，将添加 HTML 边界危险类，并有一条消息要求用户输入他/她的全名。否则（如果他输入了他的全名或该字段的内容大于6），则应删除边界危险类，并将状态变量更改为true。
我在浏览器上试过了，但没有用。
它的诀窍在于，当我试图在 StackOverflow 上的 HTML/JS/CSS 代码 sn-p 页面上提出问题时，它起作用了。当我点击 REGISTER 按钮而不在字段中输入任何内容时，border-danger 类被添加到 FULL NAME 字段中。
请问为什么它对我不起作用？ （铬和歌剧）。有什么我需要启用的吗？
我已附上注册表（register.php）和JavaScript（main.js）的代码。我还附上了 Chrome 注册表的屏幕截图。
我确定我一定是搞混了。
我需要帮助。非常感谢您的帮助。
感谢期待
Javascript
$(document).ready(function(){
$("#registration_form").on("submit",function(){
var status = false;
var name = $("#full_name");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var type = $("#usertype");
if (name.val() == "" || fullName.length < 6 ) {
name.addClass("border-danger");
$("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
status = false;
}else{
name.removeClass("border-danger");
$("#u_error").html("");
status = true;
}
})
})
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<!--Include Navbar -->
<?php include_once("./templates/header.php");?>
<div class="container" ">
<div class="card mx-auto" style="width: 30rem; ">
<div class="card-header">Register</div>
<div class="card-body">
<form id="registration_form" onsubmit="return false" autocomplete="off">
<!-- Full Name -->
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
<small id="u_error" class="form-text text-muted">
</small>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<!--Password 1-->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" name="password1" class="form-control" id="password1" placeholder="Password">
<small id="p1_error" class="form-text text-muted"></small>
</div>
<!-- Password 2 -->
<div class="form-group">
<label for="password2">Re-enter Password</label>
<input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
<small id="p2_error" class="form-text text-muted"></small>
</div>
<!-- User type -->
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" id="usertype">
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">User</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
<button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span> Register</button>
<span><a href="index.php">Login</a></span>
</form>
</div>
<!-- Forgot Password? -->
<!--
<div class="card-footer text-muted" >
<a href="#">Forgot Password?</a>
</div> -->
</div>
</div>
<body>
</html>
【问题讨论】：
-
对不起，我认为你上面的当前代码是错误的。 "如果 (name.val() == "" || fullName.length
-
你检查浏览器控制台是否有 js 错误？另外，为什么这个问题用 PHP 标记？
-
谢谢。我已经完成了所有推荐的操作，但它仍然无法在 WAMP 上运行。它在 JSFiddle 和 StackOverflow 上完美运行。还有什么想法吗？谢谢。
标签： javascript html jquery validation