function validateForm()
{
var x=document.forms["pageFeedbackSurvey"]["emailAddr"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid e-mail address");
return false;
}
var x=document.forms["pageFeedbackSurvey"]["comments"].value;
if (x==null || x=="")
{
alert("Please enter your feedback into the textbox before pressing 'Submit'");
return false;
}
var phone = document.getElementById("phone").value;
var pattern = /^([0-9]){7,15}$/;
if (pattern.test(phone))
{
alert("Your phone number : "+phone);
return true;
}
alert("It is not valid phone number!");
return false;
}
次に、html
<form action="demo_form.asp" onsubmit="return validateForm()" method="post" name="pageFeedbackSurvey" id="pageFeedbackSurvey">
<div class="pod pageFeedback">
<h2>Feedback</h2>
<div class="body">
<fieldset>
<div class="surveyrow">
<p id="q1Wording">Did you find the information you were looking for on this page?</p>
<ul>
<li> <!-- input uses class, name and value for jquery -->
<input name="showdiv2" id="survey1_1" value="Yes" type="radio" class="showsubmit"/><label for="survey1_1">Yes</label>
</li>
<li>
<input name="showdiv" id="survey1_2" value="No" type="radio" class="showform"/><label for="survey1_2">Partially</label>
</li>
<li>
<input name="showdiv" id="survey1_3" value="No" type="radio" class="showform"/><label for="survey1_3">No</label>
</li>
</ul>
</div>
<div id="extraFields">
<div class="commentRow">
<div id="hiddentextarea"> <!-- hidden div -->
<label for="comments">How can we improve this page?</label>
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,300);"
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,300);" id="comments" rows="8" cols="19"></textarea>
<p>Character limit: <input readonly="readonly" type="text" name="countdown" id="countdown" size="3" value="300"></input></p>
</div>
</div> <!-- end hidden div -->
<div id="hiddenfields"> <!-- hidden div -->
<div class="emailContainer">
<div class="email" id="email">
<input type="text" name="emailAddr" id="emailAddr" size="22" value="Enter email address"/>
</div>
</div>
<div class="phoneContainer">
<div class="phone" id="phone">
<input type="text" name="phone" id="phone" type="phone" size="22" value="" />
</div>
</div>
<div id="pageFeedbackSubmit" class="button primary right">
<input class="arrow" onclick="validate();" value="Submit" type="submit" id="surveySubmit"/>
</div><!-- button -->
</div> <!-- end hidden div -->
<div class="clearBoth"></div>
</div>
</fieldset>
<div id="errormsg" class="errorMessage" style="display: none"></div>
<div id="thankYou" style="display:none">
<h3>Thank you</h3>
<p>We appreciate you taking the time to help us.</p>
</div>
タイプまたは送信時に電話入力を検証するための解決策を見つけるのに苦労しています。ラジオボタンが選択されるまでフォームを非表示にし、ラジオが押されると電子メールと電話とテキスト領域が表示され、入力用のテキスト領域と構文用の電子メールを検証します。電話を次のように検証する必要があります英国の番号、私は電話フィールドに少なくとも正しくないというポップアップアラートを表示することができましたが、現在の設定ではどの番号も受け入れることができません.
送信時にvalidateForm関数が動作すると同時に、電子メールとテキスト領域とともに電話を検証する正しい方法を教えてもらえますか?
以下すべて追加/編集 2012/08/23
こんにちは、すべての返信に感謝しますが、まだ機能しません。ID を変更したので、もう 2 つのphoneID はありません。showdiv2 を showdiv に変更し、javascript telnumber チェックを挿入する前に、入力タイプを tel に変更しました。
braemoor.co.uk/software/telnumbers.shtml のスクリプトをヘッダーの javascript ファイルに追加し、その javascript を html に結び付けようとしましたが、その例には html がなかったので推測しています...
電子メールとテキスト領域に対して既に配置されている検証機能は、によって開始されます
<form action="demo_form.asp" onsubmit="return validateForm()"
これは正常に動作します。電話機能も送信時または送信前に実行する必要がありますか? 送信ボタンに追加してみました
<input class="arrow" onclick="checkUKTelephone();" value="Submit" type="submit" id="surveySubmit"/>
しかし、電話番号を無視して検証済みの電子メールとテキスト領域の後にデモページに転送するだけの電話を検証しません.
どこが間違っているのか教えてくれる親切な人はいますか？