У меня есть форма регистрации в экспресс-приложении.Я использую начальную загрузку для внешнего интерфейса.Я использую плагин проверки jQuery для проверки имени, электронной почты, номера телефона и т. Д., Но он не работает.Вот HTML-макет страницы.
$("#modalForm").validate({
rules: {
nameModal: {
required: true,
minlength: 8
},
emailModal: {
required: true,
minlength: 5
},
numberModal: {
required: true,
minlength: 12
},
},
messages: {
nameModal: {
required: "Please enter name",
minlength: "Your data must be at least 8 characters"
},
emailModal: {
required: "Please enter email",
minlength: "Your data must be at least 5 characters"
},
numberModal: {
required: "Please enter number",
minlength: "Number should be atleast 9 character"
},
}
});
body {
background-color: whitesmoke;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 1%;
}
.form-links {
text-align: center;
margin-bottom: 50px;
padding-bottom: 4px;
}
.form-links a {
color: #fff;
}
.formbtn{
background-color: #5d5d5d;
border-color: #d6d6c2;
font-size: 20px;
}
div.login{
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
margin-bottom: 8%;
padding: 4%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.float-right a{
color: #5d5d5d;
}
.float-right a:hover {
color: white;
}
/* The signup modal code */
.signup{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.modalcolor{
color: #5d5d5d;
background-color: #d6d6c2;
border: 1px solid #333;
padding: 2%;
border-radius: 10px;
}
<head>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/myJs/login.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 login">
<form method="POST">
<h3>Gramleys</h3>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="email" placeholder="Email" required id="emailLogin" />
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" id="loginPass" />
</div>
<br>
<button type="submit" name="login" class="btn btn-lg btn-primary formbtn">Login</button>
<button type="button" name="create" class="btn btn-lg btn-primary formbtn" data-toggle="modal" data-target="#exampleModal">Create</button>
<br>
<div class="float-right">
<a href="#" class="float-right">Forgot password</a>
</div>
</form>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade signup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modalcolor">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Signup</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form method="POST" role="form" id="modalForm">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" name="emailModal" placeholder="Email" id="emailModal" required/>
</div>
<div class="form-group">
<label for="InputName">Full Name</label>
<input type="text" class="form-control" name="nameModal" placeholder="Name" required id="nameModal" required/>
</div>
<div class="form-group">
<label for="InputPassword">Select Password</label>
<input type="password" class="form-control" name="passModal" placeholder="Password" id="passModal" />
</div>
<div class="form-group">
<label for="InputNumber">Mobile Number</label>
<input type="text" class="form-control" name="numberModal" min="1" max="10" placeholder="Mobile Number" required id="numberModal">
</div>
<div class="row">
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Age</label>
<input style="display: block;"type="number" class="form-control " name="ageModal" min="10" max="100" placeholder="Age" required id="ageModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Weight(kg)</label>
<input style="display: block;" type="number" class="form-control " name="weightModal" min="30" max="150" placeholder="Weight" required id="weightModal">
</div>
<div class="form-group d-inline col-md-4 col-lg-4">
<label for="InputAge">Height(cms)</label>
<input style="display: block;" type="number" class="form-control " name="heightModal" min="100" max="200" placeholder="Height" required id="heightModal">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-secondary">Create</button>
</div>
</div>
</div>
</div>
Почему не работает валидатор jQuery?Я пытался решить это много, но это не работает, пожалуйста, помогите мне разобраться с этой проблемой.Я рассмотрел другие ответы на stackoverflow, но ни один, кажется, не решить эту проблему.Вот ответ, откуда я взял приведенный выше js-код Как правильно проверить модальную форму Это из-за экспресс-среды или среды узла, любая помощь будет высоко оценена.
Это работает здесь, но не работаетна моем локальном узле в приложении установлен бустрап с помощью npm. введите описание изображения здесь Нет сообщений об ошибках, отображаемых на изображении.