我有以下 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>
该代码有效，它还检查用户名/电子邮件是否已被使用。问题是如果错误字符串太长，文本会超出页面（没有新行），所以我创建了四个 div，我想在其中放置错误消息，以便文本在需要时换行。
我的目标是在 div "#username_msg" 中显示每个用户名错误，在 div "#email_msg" 中显示每个电子邮件错误等。我尝试了很多东西，我搜索和谷歌，我也尝试了 showErrors 方法，但我不能解决我的问题...所以我在这里。
我正在使用 Twitter Bootstrap，并且表单正确显示为模态（http://twitter.github.com/bootstrap/javascript.html#modals）。
提前致谢！