次の HTML フォームがあります。
<form method="post" action="register.php" class="form-horizontal" id="form-registrazione">
<fieldset>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="registrazioneLabel">Registrazione</h3>
</div>
<div class="modal-body">
<div class="control-group">
<!-- Username -->
<label class="control-label">Username</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input name="username" class="span2" placeholder="Leonardo" id="username" type="text">
</div>
<div id="username_msg"></div>
</div>
</div>
<div class="control-group">
<!-- Email -->
<label class="control-label">Email</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input name="email" class="span2" placeholder="mario@rossi.com" id="email" type="email">
</div>
<div id="email_msg"></div>
</div>
</div>
<div class="control-group">
<!-- Password -->
<label class="control-label">Password</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span>
<input name="password" class="span2" placeholder="Password" id="password" type="password">
</div>
<div id="password_msg"></div>
</div>
</div>
<div class="control-group">
<!-- Conferma password -->
<label class="control-label">Conferma password</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span>
<input name="repassword" class="span2" placeholder="Password" id="repassword" type="password">
</div>
<div id="repassword_msg"></div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Registrati" class="btn btn-primary">
<button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
</div>
</fieldset>
</form>
そして、次の Javascript 検証コード:
<script>
// SI ACCETTANO SOLO USERNAME CON CARATTERI ALFANUMERICI, SPAZI, TRATTINI E UDNERSCORE
jQuery.validator.addMethod("alphanumeric", function(value, element) {
var stringa = new String(value);
stringa = stringa.replace(" ", "");
stringa = stringa.replace("-", "");
stringa = stringa.replace("_", "");
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(stringa.valueOf());
});
// SCRIPT CHE CONVALIDA IL FORM DI REGISTRAZIONE
$(document).ready(function(){
$('#form-registrazione').validate({
rules: {
username: {
minlength: 6,
maxlength: 15,
alphanumeric: true,
// L'USERNAME NON DEVE ESSERE GIA' USATO
remote: {
url: "do_action.php?action=username_used",
type: "post",
async: false,
data: {
email: function() {
return $("#username").val();
}
}
},
required: true
},
email: {
required: true,
email: true,
// L'EMAIL NON DEVE ESSERE GIA' UTILIZZATA
remote: {
url: "do_action.php?action=email_used",
type: "post",
async: false,
data: {
username: function() {
return $("#email").val();
}
}
},
},
password: {
minlength: 8,
required: true
},
repassword: {
minlength: 8,
required: true,
equalTo: "#password"
}
},
messages: {
username: {
required: "Scegli il tuo nome utente.",
minlength: "Inserisci almeno almeno 6 caratteri.",
maxlength: "Inserisci meno di 15 caratteri.",
alphanumeric: "Si accettano soltanto caratteri alfanumerici, spazi, trattini e underscore.",
remote: "L'username è già utilizzato da un altro giocatore, per favore scegline un altro."
},
password: {
required: "Imposta una password.",
minlength: "La password deve essere lunga almeno 8 caratteri.",
},
repassword: {
required: "Conferma la tua password.",
minlength: "La password deve essere lunga almeno 8 caratteri.",
equalTo: "Le due password non combaciano."
},
email: {
required: "Inserisci un indirizzo email.",
email: "L'indirizzo email inserito non è corretto.",
remote: "L'email è già utilizzata da un altro giocatore, puoi utilizzare un'altra email oppure <a href='recover.php'>recuperare i dati del tuo account</a>."
}
},
highlight: function(label) {
$(label).closest('.control-group').removeClass("success").addClass('error');
},
success: function(label) {
label
.addClass('valid')
.closest('.control-group').addClass('success');
}
});
});
</script>
コードは機能し、ユーザー名/電子メールが既に使用されているかどうかも確認します。問題は、エラー文字列が長すぎるとテキストがページからはみ出す (改行がない) ため、エラー メッセージを配置する 4 つの div を作成して、必要に応じてテキストが改行されるようにすることです。
私の目標は、div "#username_msg" のすべてのユーザー名エラー、div "#email_msg" のすべての電子メール エラーなどを表示することです。多くのことを試し、Google で検索し、showErrors メソッドも試しましたが、できませんでした。私の問題を解決してください...だからここにいます。
私は Twitter Bootstrap を使用しており、フォームはモーダル ( http://twitter.github.com/bootstrap/javascript.html#modals ) に正しく表示されます。
前もって感謝します！