jQueryを使用していない場合は、フォームの送信時に起動できる検証メソッドを作成するだけです。このメソッドは、テキストフィールドを検証して、テキストフィールドが空またはデフォルト値でないことを確認できます。このメソッドはbool値を返します。これがfalseの場合は、アラートを起動し、検証に合格しなかったフィールドを強調表示するクラスを割り当てることができます。
HTML：
<form name="form1" method="" action="" onsubmit="return validateForm(this)">
<input type="text" name="name" value="Name"/><br />
<input type="text" name="addressLine01" value="Address Line 1"/><br />
<input type="submit"/>
</form>
JavaScript：
function validateForm(form) {
var nameField = form.name;
var addressLine01 = form.addressLine01;
if (isNotEmpty(nameField)) {
if(isNotEmpty(addressLine01)) {
return true;
{
{
return false;
}
function isNotEmpty(field) {
var fieldData = field.value;
if (fieldData.length == 0 || fieldData == "" || fieldData == fieldData) {
field.className = "FieldError"; //Classs to highlight error
alert("Please correct the errors in order to continue.");
return false;
} else {
field.className = "FieldOk"; //Resets field back to default
return true; //Submits form
}
}
validateFormメソッドは、検証する要素を割り当て、この場合はisNotEmptyメソッドを呼び出して、フィールドが空であるか、デフォルト値から変更されていないかを検証します。trueの値を返すまで、またはそのフィールドの条件が失敗した場合はfalseを返すまで、inNotEmptyメソッドを継続的に呼び出します。
これを試してみて、それが役立つかどうか、または質問がある場合はお知らせください。もちろん、番号、電子メールアドレス、有効なURLなどのみを検証するための追加のカスタムメソッドを作成できます。
jQueryを使用する場合は、jQueryValidationプラグインを試してみます。私は最後のいくつかのプロジェクトでそれを使用してきました、そしてそれはかなりいいです。機会があればぜひチェックしてみてください。http://docs.jquery.com/Plugins/Validation