11544 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un petit problème avec une validation de formulaire et NyroModal. Mon formulaire s'ouvre dans nyro modal et quand je valide, j'aimerai que la page s'affiche aussi dans un nyro modal, hors cela s'affiche en grand.

J'ai compris que c'était lié à mes scripts de vérification de la saisie mais je n'arrive pas a solutionner mon souci

code de ma page register: register.php

<?php
if(isset($_POST['send']))
{
$nom = stripslashes($_POST["nom"]);
$msg = "Nom:\t$nom\n";
//...
?>		
<ul>
	<li><strong>Cliquez ici pour fermer!</strong> All fields are OK</li>
</ul>
</div>
<?php
}
?>
<form method="post" id="customForm" action="register.php">
<div>
	<label for="name">Name</label>
	<input id="name" name="name" type="text" value="Nicolas"/>
	<span id="nameInfo">What's your name?</span>
</div>
<div>
	<input id="send" name="send" type="submit" value="Send"  />
	<!-- <input id="send" name="send" type="submit" value="Send" class="nyroModal" /> fonctionne mais s'ouvre en grand-->
</div>
</form>
<script type="text/javascript" src="<?php echo STATIC_URL;?>js/validation.js"></script>
.

Code de ma page de validation (validation.js)

$(document).ready(function()
{
//global vars
var form = $("#customForm");
var name = $("#name");
//On blur
name.blur(validateName);
email.blur(validateEmail);
pass1.blur(validatePass1);
pass2.blur(validatePass2);
//On key press
name.keyup(validateName);
pass1.keyup(validatePass1);
pass2.keyup(validatePass2);
message.keyup(validateMessage);
//On Submitting
form.submit(function(){
	if(validateName() & validateEmail() & validatePass1() & validatePass2() & validateMessage())
	{
		//var validForm = $('#customForm').submit(function(e);	
		return true;
	}
	else
		return false;
});

//validation functions
function validateEmail(){
	//testing regular expression
	var a = $("#email").val();
	var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
	//if it's valid email
	if(filter.test(a)){
		email.removeClass("error");
		emailInfo.text("Valid E-mail please, you will need it to log in!");
		emailInfo.removeClass("error");
		return true;
	}
	//if it's NOT valid
	else{
		email.addClass("error");
		emailInfo.text("Stop cowboy! Type a valid e-mail please  [langue]");
		emailInfo.addClass("error");
		return false;
	}
}
function validateName(){
	//if it's NOT valid
	if(name.val().length < 4){
		name.addClass("error");
		nameInfo.text("We want names with more than 3 letters!");
		nameInfo.addClass("error");
		return false;
	}
//...


J'ai vu des exemples sur le site Nyro (http://nyromodal.nyrodev.com/) mais je n'arrive pas à adapter mon code.

<form id="myValidForm" method="post" action="demoSent.php">
  <input type="text" name="wouhou" />
  <input type="submit" value="simple form with validation" />
</form>
<script type="text/javascript">
$(function() {
  $('#manual1').click(function(e) {
    e.preventDefault();
    $.nmManual('demoSent.php');
  });
  $('#manual2').click(function(e) {
    e.preventDefault();
    $('#imgFiche').nmCall();
  });
  var validForm = $('#myValidForm').submit(function(e) {
    e.preventDefault();
    if (validForm.find(':text').val() != '') {
      validForm.nyroModal().nmCall();
    } else {
      alert("Enter a value before going to " + validForm.attr("action"));
    }
  };
});
</script>


Si quelqu'un a une idée je suis preneur !
Merci de votre aide.
Modifié par Tankian33 (28 Feb 2012 - 11:27)