javascript - JavaScript を使用してフォームを検証する

Question

JavaScript についてはよくわかりませんが、作成したフォームの入力を検証するために JavaScript を使用する必要があります。多くの例を見てきましたが、なぜうまくいかないのか本当にわかりません。送信をクリックしても、何も起こらず、次のページに移動するだけです。そこにはJavaScriptすらありません。それが完全に明白な答えである場合は申し訳ありませんが、私はjavascriptの経験がないので、何を探しているのかわかりません. 私は同じページにすべてのコードを書いています。助けてくれてありがとう。

JavaScript:

<script type="text/javascript">
function validateform(theform) {
var reason = "";

reason += validateName(theform.name);
reason += validateSurname(theform.surname);
reason += validateEmail(theform.email);
reason += validateHomephone(theform.homephone);
reason += validateMobilephone(theform.mobilephone);
reason += validateAddress(theform.address);
reason += validateTown(theform.town);
reason += validateCounty(theform.county);
reason += validatePostcode(theform.postcode);
reason += validateEmpty(theform.empty);


if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}

alert("All fields are filled correctly");
return true;
}




function validateEmpty(fld) {
var error = "";

if (fld.value.length == 0) {
    fld.style.background = 'Yellow'; 
    error = "The required field has not been filled in.\n"
} else {
    fld.style.background = 'White';
}
return error;  
}




function validateName(fld) {
var error = "";
var illegalChars = ^[a-z\s]*$; // allow letters, numbers

if (fld.value == "") {
    fld.style.background = 'Yellow'; 
    error = "You didn't enter a name.\n";
} else if (illegalChars.test(fld.value)) {
    fld.style.background = 'Yellow'; 
    error = "The name contains illegal characters.\n";
} else {
    fld.style.background = 'White';
}
return error;
}



function validatSurname(fld) {
var error = "";
var illegalChars = ^[a-z\s]*$; // allow letters, numbers

if (fld.value == "") {
    fld.style.background = 'Yellow'; 
    error = "You didn't enter a surname.\n";
} else if (illegalChars.test(fld.value)) {
    fld.style.background = 'Yellow'; 
    error = "The surname contains illegal characters.\n";
} else {
    fld.style.background = 'White';
}
return error;
}



function validateEmail(fld) {
var error="";
var tfld = trim(fld.value);                        // value of field with whitespace   trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

if (fld.value == "") {
    fld.style.background = 'Yellow';
    error = "You didn't enter an email address.\n";
} else if (!emailFilter.test(tfld)) {              //test email for illegal characters
    fld.style.background = 'Yellow';
    error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
    fld.style.background = 'Yellow';
    error = "The email address contains illegal characters.\n";
} else {
    fld.style.background = 'White';
}
return error;
}


function validateHomenumber(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');    

if (fld.value == "") {
    error = "You didn't enter a phone number.\n";
    fld.style.background = 'Yellow';
} else if (isNaN(parseInt(stripped))) {
    error = "The home phone number contains illegal characters.\n";
    fld.style.background = 'Yellow';
} else if (!(stripped.length == 11)) {
    error = "The home phone number is the wrong length.\n";
    fld.style.background = 'Yellow';
} else {
    fld.style.background = 'White';
}
return error;
}

function validateMobilenumber(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');    


if (isNaN(parseInt(stripped))) {
    error = "The mobile phone number contains illegal characters.\n";
    fld.style.background = 'Yellow';
} else if (!(stripped.length == 11)) {
    error = "The mobile phone number is the wrong length.\n";
    fld.style.background = 'Yellow';
} else {
    fld.style.background = 'White';
}
return error;
}

function validateAddress(fld) {
var error = "";

if (fld.value == "") {
    error = "You didn't enter a home address.\n";
    fld.style.background = 'Yellow';

    }else {
    fld.style.background = 'White';
}
    return error;
}

function validateTown(fld) {
var error = "";

if (fld.value == "") {
    error = "You didn't enter a town or city.\n";
    fld.style.background = 'Yellow';

    }else {
    fld.style.background = 'White';
}
    return error;
}


function validateCounty(fld) {
var error = "";

if (fld.value == "") {
    error = "You didn't enter a county.\n";
    fld.style.background = 'Yellow';

    }else {
    fld.style.background = 'White';
}
    return error;
}

function validatePostcode(fld) {
var error = "";     
var illegalChars = ^[a-z\s]*$;
var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/;

if (fld.value == "") {
    error = "You didn't enter a post code.\n";
    fld.style.background = 'Yellow';
     } 
     else if (illegalChars.test(fld.value)) {
    fld.style.background = 'Yellow'; 
    error = "The post code contains illegal characters.\n";
    else if ((fld.value.length < 7) || (fld.value.length > 8)) {
    error = "The post code is the wrong length. \n";
    fld.style.background = 'Yellow';
} else if (regpostcode.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The post code isn't the correct format.\n";
}
} else {
    fld.style.background = 'White';
}
return error;
}


function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}

そしてhtml

</script>
</head>
<body> 
<table class="formy" border="o" cellpadding="2" cellspacing="5" bgcolor="#F4EC53"  align="center">
<th colspan="2" align="center">Booking Private Hire</th>
<form name="firstform" method="post" onsubmit="return validateform(this)"  action="secondform.php">
<table summary="first form">
<tr>
<td><label for="Name">First name:</label></td>
<td><input name="Name" size="35" maxlength="50" type="text"></td>
</tr>   
<tr>
<td><label for="Surname">Surname:</label></td>
<td><input name="Surname" size="35" maxlength="25" type="password"></td>
</tr>   
<tr>
<td><label for="Email">E-mail address:</label></td>
<td><input name="Email" size="35" maxlength="30" type="text"></td>
</tr>  
<tr>
<td><label for="Homephone">Home phone number:</label></td>
<td><input name="Homephone" size="35" maxlength="25" type="text"></td>
</tr>  
<tr>
<td>
    <label for="Mobilephone">Mobile phone number:</label></td>
<td><input name="Mobilephone" size="35" maxlength="50" type="text"></td>
</tr>  
<tr>
<td>
    <label for="Address">Home address:</label></td>
<td><input name="Address" size="35" maxlength="50" type="text"></td>
</tr>  
<tr>
<td>
    <label for="Town">Town/city:</label></td>
<td><input name="Town" size="35" maxlength="50" type="text"></td>
</tr> 
<tr>
<td>
    <label for="County">County:</label></td>
<td><input name="County" size="35" maxlength="50" type="text"></td>
</tr> 
<tr>
<td>
    <label for="Postcode">Post code:</label></td>
<td><input name="Postcode" size="35" maxlength="50" type="text"></td>
</tr> 

<td> </td>
<td><input name="Submit" value="Send" type="submit" ></td>
<td> </td>

</table>
</form> 
</body>
</html>

score 1 · Accepted Answer

編集:最終的に私のために働いたのはこれです:あなたが参照しているフィールド名は、フィールドの実際の名前と一致しません。

reason += validateName(theform.name);

に変更

reason += validateName(theform.Name);

また、JavaScript コードにエラーがあるようです:

次の行は解析されません。

var illegalChars = ^ [a - z\s] * $; // allow letters, numbers

validatePostcode() には構造的な問題があります。この「else if」には、前に閉じ括弧がありません。

else if ((fld.value.length < 7) || (fld.value.length > 8)) {

あなたは次のことを考えていたかもしれません:

    if (fld.value == "") {
        error = "You didn't enter a post code.\n";
        fld.style.background = 'Yellow';
    } else if (illegalChars.test(fld.value)) {
        fld.style.background = 'Yellow';
        error = "The post code contains illegal characters.\n";
    } else if ((fld.value.length < 7) || (fld.value.length > 8)) {
        error = "The post code is the wrong length. \n";
        fld.style.background = 'Yellow';
    } else if (regpostcode.test(fld.value)) {
        fld.style.background = 'Yellow';
        error = "The post code isn't the correct format.\n";
    } else {
        fld.style.background = 'White';
    }

score 0 · Accepted Answer

変数「theform」に何も割り当てていないようです。

JS エラーが発生していて、検証が役に立たないので、フォームが送信されるだけだと思います。

score 0 · Accepted Answer

あなたのコードによると、あなたがjQueryに精通していると仮定すると、これを行うより簡単な方法があるかもしれません...

1) 関数に「this」を渡す

<form name="firstform" method="post" onsubmit="return validateform(this)"  action="secondform.php">

2) 関数の検証

function validateform(myForm)
{
  $(myForm).find('input').each(function(){
     var val_trim = $.trim($(this).val());
     var input_name = $(this).attr('name');
     if(val_trim.length == 0)
     {
        return false;
     }
     else
     {
        if(input_name == 'Email')
        {
           validateEmail(val_trim); 
        }
        else if(input_name == 'Country')
        {
           ...
        } 
     }
  })
}

javascript - JavaScript を使用してフォームを検証する

3 に答える 3

Related

Reference