1
В настоящее время я работаю над проектом и имею довольно сложное время с этим плагином. Мне удалось заставить его работать без пользовательских ошибок. Одна из проблем, с которыми я столкнулась, заключалась в том, что если у меня есть требуемые теги для всех элементов, t, но когда у меня есть его только на входе электронной почты, он работает. Когда я пытаюсь выполнить выборочную проверку, я не получаю ошибок при нажатии кнопки отправки.jQuery Validation Custom Errors
$(document).ready(function() {
$(".form-horizontal").validate({
rules: {
name: "required", social: "required", postal: {
required: true, postal: true
}
,
phone: {
required: true, phone: true
}
,
email: {
required: true, email: true
}
}
,
messages: {
radio: "Please select a gender.", option: "Please select a province."
}
}
);
}
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lab 5 Part B</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<form class="form-horizontal" onsubmit="return false;">
<fieldset>
<legend>Contact Details</legend>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="name" class="form-control" id="inputName" name="inputName" placeholder="Your name">
</div>
</div>
<div class="form-group">
<label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="social" class="form-control" id="inputSocial" name="inputSocial" placeholder="(9 digits)">
</div>
</div>
<div class="form-group">
<label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Gender:</label>
<div class="col-lg-10">
<div class="radio">
<div class="status"></div>
<label>
<input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
</label>
<label>
<input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Province:</label>
<div class="status"></div>
<div class="col-lg-10">
<select class="form-control" name="selectProvince" id="selectProvince">
<option value="">Select One</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland & Labrador</option>
<option value="NS">Novia Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="postal" class="form-control" id="inputPostal" name="inputPostal" placeholder="(Ex: L8S5CR)">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="phone" class="form-control" id="inputPhone" input="inputPhone" placeholder="(Ex: 905-321-4587)">
</div>
</div>
<div class="form-group">
<label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" input="inputEmail">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<hr>
<footer>
<p>© Jamie Steele 2016</p>
</footer>
</div>
<!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>
http://jsfiddle.net/arunpjohny/obLsd65q/1/ - Ваши имена и имена, используемые в правилах, не совпадают, у вас есть 'name =" inputName "' в элементе, но в 'rules' вы используют 'name' –
см. http://jsfiddle.net/arunpjohny/obLsd65q/2/ –
Спасибо, я не понял, что параметр имени использовался для установки проверки, хотя это был тип. –