Boas!
Bem a minha duvida e como por o jQuery Validation a focinar no bootstrap!
Antes de fazer como Bootstrap
Diz um simples codigo de jQuery Validation para ver como ele funcionava.
O pagina registar com o jQuery Validation ficou a funcionar como podem ver aqui ----> http://prntscr.com/5jse1p
Mas quando tentei adaptar o código da imagem anterior para bootstrap ele não aparece os campos não presenciados e
e vai para pagina .php para registar na base dados com os campos vazios!
Código :
Se agúem me poder ajudar poste ai uma resposta!
Se não obrigado na mesma e boas festas.
Bem a minha duvida e como por o jQuery Validation a focinar no bootstrap!
Antes de fazer como Bootstrap
Diz um simples codigo de jQuery Validation para ver como ele funcionava.
O pagina registar com o jQuery Validation ficou a funcionar como podem ver aqui ----> http://prntscr.com/5jse1p
Mas quando tentei adaptar o código da imagem anterior para bootstrap ele não aparece os campos não presenciados e
e vai para pagina .php para registar na base dados com os campos vazios!
Código :
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Custom styles for our template -->
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen" >
<link rel="stylesheet" href="assets/css/main.css">
<!-- Load jQuery and the validate plugin -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<!-- Load jQuery styles label error -->
<link href="assets/css/rumnnable.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<!-- jQuery Form Validation code -->
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
Nome: "required",
Apelido: "required",
Username: {
required: true,
minlength: 5
},
Email: {
required: true,
email: true
},
Password: {
required: true,
minlength: 5
},
Pass_conf: {
required:true,
equalTo:"#Password"
},
Pass_conf: {
number: true,
required:true,
},
Telemovel: {
number: true,
minlength: 9,
maxlength: 9,
required: true
},
agree: "required"
},
// Specify the validation error messages
messages: {
Nome: "Digite seu primeiro nome",
Apelido: "Digite seu ultimo nome",
Username: {
required: "Por favor, forneça o seu no de utilizador",
minlength: "Sua senha deve ter pelo menos 5 caracteres"
},
Password: {
required: "Por favor, forneça uma senha",
minlength: "Sua senha deve ter pelo menos 5 caracteres"
},
Pass_conf: {
required: "Por favor, forneça a senha digitada anteriormente ",
equalTo: "As senhas fornecidas são diferentes"
},
Telemovel: {
required: "Por favor, forneça o seu Nº Telemovel",
minlength: "Seu Nº Telemovel deve ter pelo menos 9 caracteres",
maxlength: "Seu Nº Telemovel não pode ter mais 9 caracteres"
},
Email: "Por favor, forneça o seu Email",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<!-- container -->
<div class="container">
<div class="row">
<!-- Article main content -->
<article class="col-xs-12 maincontent">
<header class="page-header">
<h1 class="page-title">Registar</h1>
</header>
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<section id="content">
<div class="panel panel-default">
<div class="panel-body">
<h3 class="thin text-center">Criar uma nova Conta</h3>
<p class="text-center text-muted">Lorem ipsum dolor sit amet, <a href="signin.html">Login</a> adipisicing elit. Quo nulla quibusdam cum doloremque incidunt nemo sunt a tenetur omnis odio. </p>
<hr>
<form id="register-group" class="register-group" method="post" action="signup.php">
<h3 class="text-center thin">Preencha o formulário abaixo:</h3>
<div class="register-group">
<div class="top-margin">
<label>Username</label>
<input id='Username' name='Username' type="text" class="form-control">
</div>
</div>
<div class="register-group">
<div class="row top-margin">
<div class="col-sm-6">
<label>Password <span class="text-danger">*</span></label>
<input id='Password' name='Password' type="password" class="form-control">
</div>
<div class="col-sm-6">
<label>Confirmar Password <span class="text-danger">*</span></label>
<input id='Pass_conf' name='Pass_conf' type="Password" class="form-control">
</div>
</div>
</div>
<div class="register-group">
<div class="top-margin">
<label>Nome <span class="text-danger">*</label>
<input id='Nome' name='Nome' type="text" class="form-control">
</div>
</div>
<div class="register-group">
<div class="top-margin">
<label>Apelido <span class="text-danger">*</label>
<input id='Apelido' name='Apelido' type="text" class="form-control">
</div>
</div>
<div class="register-group">
<div class="top-margin">
<label>Telemovel <span class="text-danger">*</label>
<input id='Telemovel' name='Telemovel' type="tel" class="form-control">
</div>
</div>
<div class="register-group">
<div class="top-margin">
<label>Email Address <span class="text-danger">*</span></label>
<input id='Email' name='Email' type="email" class="form-control">
</div>
</div>
<hr>
<div class="register-group">
<div class="col-lg-4 text-right">
<button class="btn btn-action" type="submit">Registar</button>
</div>
</div>
<div class="col-lg-3 text-right">
<button class="btn btn-action" type="reset">Limpar</button>
</div>
</section>
</div>
</form>
</div>
</div>
</div>
</article>
<!-- /Article -->
</div>
</body>
</html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Custom styles for our template -->
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen" >
<link rel="stylesheet" href="assets/css/main.css">
<!-- Load jQuery and the validate plugin -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<!-- Load jQuery styles label error -->
<link href="assets/css/rumnnable.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<!-- jQuery Form Validation code -->
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
Nome: "required",
Apelido: "required",
Username: {
required: true,
minlength: 5
},
Email: {
required: true,
email: true
},
Password: {
required: true,
minlength: 5
},
Pass_conf: {
required:true,
equalTo:"#Password"
},
Pass_conf: {
number: true,
required:true,
},
Telemovel: {
number: true,
minlength: 9,
maxlength: 9,
required: true
},
agree: "required"
},
// Specify the validation error messages
messages: {
Nome: "Digite seu primeiro nome",
Apelido: "Digite seu ultimo nome",
Username: {
required: "Por favor, forneça o seu no de utilizador",
minlength: "Sua senha deve ter pelo menos 5 caracteres"
},
Password: {
required: "Por favor, forneça uma senha",
minlength: "Sua senha deve ter pelo menos 5 caracteres"
},
Pass_conf: {
required: "Por favor, forneça a senha digitada anteriormente ",
equalTo: "As senhas fornecidas são diferentes"
},
Telemovel: {
required: "Por favor, forneça o seu Nº Telemovel",
minlength: "Seu Nº Telemovel deve ter pelo menos 9 caracteres",
maxlength: "Seu Nº Telemovel não pode ter mais 9 caracteres"
},
Email: "Por favor, forneça o seu Email",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<!-- container -->
<div class="container">
<div class="row">
<!-- Article main content -->
<article class="col-xs-12 maincontent">
<header class="page-header">
<h1 class="page-title">Registar</h1>
</header>
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<section id="content">
<div class="panel panel-default">
<div class="panel-body">
<h3 class="thin text-center">Criar uma nova Conta</h3>
<p class="text-center text-muted">Lorem ipsum dolor sit amet, <a href="signin.html">Login</a> adipisicing elit. Quo nulla quibusdam cum doloremque incidunt nemo sunt a tenetur omnis odio. </p>
<hr>
<form id="register-group" class="register-group" method="post" action="signup.php">
<h3 class="text-center thin">Preencha o formulário abaixo:</h3>
<div class="register-group">
<div class="top-margin">
<label>Username</label>
<input id='Username' name='Username' type="text" class="form-control">
</div>
</div>
<div class="register-group">
<div class="row top-margin">
<div class="col-sm-6">
<label>Password <span class="text-danger">*</span></label>
<input id='Password' name='Password' type="password" class="form-control">
</div>
<div class="col-sm-6">
<label>Confirmar Password <span class="text-danger">*</span></label>
<input id='Pass_conf' name='Pass_conf' type="Password" class="form-control">
</div>
</div>
</div>
<div class="register-group">
<div class="top-margin">
<label>Nome <span class="text-danger">*</label>
<input id='Nome' name='Nome' type="text" class="form-control">
</div>
</div>
<div class="register-group">
<div class="top-margin">
<label>Apelido <span class="text-danger">*</label>
<input id='Apelido' name='Apelido' type="text" class="form-control">
</div>
</div>
<div class="register-group">
<div class="top-margin">
<label>Telemovel <span class="text-danger">*</label>
<input id='Telemovel' name='Telemovel' type="tel" class="form-control">
</div>
</div>
<div class="register-group">
<div class="top-margin">
<label>Email Address <span class="text-danger">*</span></label>
<input id='Email' name='Email' type="email" class="form-control">
</div>
</div>
<hr>
<div class="register-group">
<div class="col-lg-4 text-right">
<button class="btn btn-action" type="submit">Registar</button>
</div>
</div>
<div class="col-lg-3 text-right">
<button class="btn btn-action" type="reset">Limpar</button>
</div>
</section>
</div>
</form>
</div>
</div>
</div>
</article>
<!-- /Article -->
</div>
</body>
</html>
Se agúem me poder ajudar poste ai uma resposta!
Se não obrigado na mesma e boas festas.