javascript - 複数のフォームの検証と値の計算

Question

フォームを検証するときに少し問題があります。フォームのデザインは提供されましたが、フォームを検証するスクリプトを作成する必要があります。状態とその後のすべてを検証するようになったとき、それはうまくいきませんでした。総支払額を計算すると、登録料などで変動するはずなのですが、金額を表示して計算することができませんでした。助けてください。これは高速化された JavaScript クラスであり、私は Java に慣れています。

私は次のことを行う必要があります: ユーザーが宴会に出席する数を変更した場合、宴会料金の合計を計算し、金額を表示し、総計を再計算して表示します。

ユーザーが [登録] ボタンをクリックしたら、必須フィールドが入力されていることを確認します。フォームは、必須フィールドが次の基準を満たしている場合にのみ送信する必要があります。

名、姓、番地、市区町村は空白にできません
州を選択する必要があります
5 桁の郵便番号を入力する必要があります (オプション - 5 桁または 9 桁の形式を使用できます)
電子メールアドレスには「@」記号が含まれている必要があります (オプション - 電子メールアドレスの形式を検証するための正規表現を見つけて適用します)
電話番号は、正確に 3 桁の市外局番、3 桁のプレフィックス、および 4 桁の交換機を使用して入力する必要があります。

フォームは次のようになります: https://angel.aacc.edu/AngelUploads/Content/CSI1498752012FA/Misc/Lab5.htm

これまでのところこれしか得られませんでした

function validateForm()
{
    var valid = false;

    if(document.registration.fname.value == "")
    {
        alert("First name must be entered.");
        return valid;
    }
    else if(document.registration.lname.value ==  "")
    {
        alert("Last name must be entered.");
        return valid;
    }
    else if(document.registration.street.value ==  "")
    {
        alert("Sreet address must be entered.");
        return valid;
    }
    else if(document.registration.city.value ==  "")
    {
        alert("City must be entered.");
        return valid;
    }
    else if(document.registration.zip.value == /(^\d{5}$)|(^\d{5}-\d{4}$)/)
    {
        alert("Enter a valid zip code.");
        return valid;
    }
}

function calcTotal()
{
    // some code here
}

score 0 · Accepted Answer

あなたはかなり欠けていました..私があなたをもっと近づけるはずであると私が思ういくつかのコードがあります。私が気付いたいくつかの問題は、Cityが==ではなく！=を探していたため、検証が成功した場合にのみ送信ボタンが返されるため、代わりに

onclick="validateForm()"

onclick="return validateForm()"

HTMLの本文にCalcTotalの呼び出しを追加したので、常に何かに設定されます。

次に、小計フィールドの開始を開始しました。そこで編集を行う必要があると思いますが、これで十分に近づいて完成できることを願っています。

<html>
<head>
<title>Registration Form</title>
<style>
#main h1 {font-size: 18pt; color: rgb(83,183,51); letter-spacing: 4;
       border-top: 2px solid rgb(83,183,51); font-weight: bold}
#main p {font-size: 9pt;}
#main #intro {text-align: right; font-weight: bold}
span {color: red}

table {font-size: 8pt; width: 510px; padding: 10px;
       border-bottom: 2px solid rgb(83,183,51)}

#lname, #fname, #city, #email, #memberid {width: 198px}
#street {width: 432px}
#zip {width: 88px}
#regFee, #banq, #options, #grandTotal {width: 60px}
</style>
<script type="text/javascript">

function validateForm()
{

    if(document.registration.fname.value == "")
    {
        alert("First name must be entered.");
        return false;
    }
    else if(document.registration.lname.value ==  "")
    {
        alert("Last name must be entered.");
        return false;
    }
    else if(document.registration.street.value ==  "")
    {
        alert("Street address must be entered.");
        return false;
    }
    else if(document.registration.city.value ==  "")
    {
        alert("City must be entered.");
        return false;
    }
    else if(document.registration.state.value ==  "Choose")
        {
            alert("Please select a state");
            return false;
    }
    else if(document.registration.zip.value == /(^\d{5}$)|(^\d{5}-\d{4}$)/)
    {
        alert("Enter a valid zip code.");
        return false;
    }
    return true;          
}


function calcMeals()
{
    var mealTotal = 0.00;

    if(document.getElementById("optBreakfast").checked)
        mealTotal = mealTotal + 5.00;
    if(document.getElementById("optLunch").checked)
        mealTotal = mealTotal + 10.00;
    document.getElementById("options").value = mealTotal.toFixed(2);
    calcTotal();
}

function calcBanq()
{
    var banqTotal = 0
    var numGuests = document.getElementById("guest").value;
    if(numGuests > 0)
        document.getElementById("banq").value = (30 * numGuests);
    else
        document.getElementById("banq").value = 0.00;
}

function calcTotal()
{
    var regFee = 125.00;
    var options = document.getElementById("options");
    var banquet = document.getElementById("banq");
    var total = regFee + Number(options.value) + Number(banquet.value);

    document.getElementById("grandTotal").value = parseFloat(total).toFixed(2)
}



</script>
</head>

<body>
<div id="main">
<p id="intro">15th Annual JavaScript Conference<br />
   Anne Arundel Community College<br />
   April 26<br />
   Conference Fee: $125
</p>
<h1>Conference Registration Form</h1>

<form id="registration" name="registration" >

<table>
<tr>
   <td><span>*</span>First Name</td>
   <td><input name="fname" id="fname" /></td>
   <td><span>*</span>Last</td>
   <td colspan="3"><input name="lname" id="lname" /></td>
</tr>

<tr>
   <td><span>*</span>Street</td>
   <td colspan="5"><input type="text" id="street" name="street" /></td>
</tr>

<tr>
   <td><span>*</span>City</td>
   <td><input type="text" id="city" name="city" /></td>
   <td><span>*</span>State</td>
   <td><select id="state" name="state">
              <option value="" selected>Choose</option>
              <option value="AK" >AK</option>
              <option value="AL" >AL</option>
              <option value="AR" >AR</option>
              <option value="AZ" >AZ</option>
              <option value="CA" >CA</option>
              <option value="CO" >CO</option>

              <option value="CT" >CT</option>
              <option value="DC" >DC</option>
              <option value="DE" >DE</option>
              <option value="FL" >FL</option>
              <option value="GA" >GA</option>
              <option value="HI" >HI</option>

              <option value="IA" >IA</option>
              <option value="ID" >ID</option>
              <option value="IL" >IL</option>
              <option value="IN" >IN</option>
              <option value="KS" >KS</option>
              <option value="KY" >KY</option>

              <option value="LA" >LA</option>
              <option value="MA" >MA</option>
              <option value="MD" >MD</option>
              <option value="ME" >ME</option>
              <option value="MI" >MI</option>
              <option value="MN" >MN</option>

              <option value="MO" >MO</option>
              <option value="MS" >MS</option>
              <option value="MT" >MT</option>
              <option value="NC" >NC</option>
              <option value="ND" >ND</option>
              <option value="NE" >NE</option>

              <option value="NH" >NH</option>
              <option value="NJ" >NJ</option>
              <option value="NM" >NM</option>
              <option value="NV" >NV</option>
              <option value="NY" >NY</option>
              <option value="OH" >OH</option>

              <option value="OK" >OK</option>
              <option value="OR" >OR</option>
              <option value="PA" >PA</option>
              <option value="RI" >RI</option>
              <option value="SC" >SC</option>
              <option value="SD" >SD</option>

              <option value="TN" >TN</option>
              <option value="TX" >TX</option>
              <option value="UT" >UT</option>
              <option value="VA" >VA</option>
              <option value="VT" >VT</option>
              <option value="WA" >WA</option>

              <option value="WI" >WI</option>
              <option value="WV" >WV</option>
              <option value="WY" >WY</option>
              <option value="AA" >AA</option>
              <option value="AE" >AE</option>
              <option value="AP" >AP</option>

              <option value="AS" >AS</option>
              <option value="FM" >FM</option>
              <option value="GU" >GU</option>
              <option value="MP" >MP</option>
              <option value="MH" >MH</option>
              <option value="PR" >PR</option>

              <option value="PW" >PW</option>
              <option value="VI" >VI</option>
            </select></td>
   <td><span>*</span>Zip</td>
   <td><input type="text" id="zip" name="zip" /></td>
</tr>

<tr>
   <td><span>*</span>E-mail</td>
   <td colspan="5"><input name="email" id="email" /></td>
</tr>

<tr>
   <td><span>*</span>Phone Number</td>
   <td colspan="5">
       ( <input id="phone1" name="phone1" size="3" /> )
       <input id="phone2" name="phone2" size="3" /> -
       <input id="phone3" name="phone3" size="4" />
   </td>
</tr>

<tr><td colspan="6">&nbsp;</td>
</tr>

<tr>
   <td colspan="5">Registration Fee</td>
   <td>$<input type="text" id="regFee" name="regFee" value="125.00" readOnly="true" />
</tr>

<tr>
   <td colspan="6">Optional (additional fees may apply)</td>
</tr>

<tr>
   <td colspan="5">
       <input type="checkbox" onchange="calcMeals()" name="opt1" id="optBreakfast" value="5" /> Breakfast ($5)
       <input type="checkbox" onchange="calcMeals()" name="opt2" id="optLunch" value="10" /> Lunch ($10)
       <input type="checkbox" onchange="calcMeals()" name="opt3" id="optHappyHour" checked value="0" /> Happy Hour (free!)
   </td>
   <td>$<input type="text" id="options" name="options" value="0.00" readOnly="true" /></td>
</tr>

<tr>
   <td colspan="2">Number attending dinner banquet ($30 per person)</td>
   <td>&nbsp;</td>
   <td>
       <select id="guests" name="guests" onchange="CalcBanq()">
       <option>0</option>
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       </select>
   </td>
   <td>&nbsp;</td>
   <td>$<input type="text" id="banq" name="banq" value="0.00" readOnly="true" /></td>
</tr>

<tr><td colspan="6">&nbsp;</td>
</tr>

<tr>
   <td colspan="5">Grand Total Due</td>
    <td>$<input type="text" id="grandTotal" name="grandTotal" readOnly="true" /></td>
</tr>
</table>

<p><span>* Required Information</span></p>
<p style="text-align: center"><input id="sbutton" type="submit" value="Register" onclick="return validateForm()" /></p>

</form>

</div>
<script type="text/javascript">
    calcTotal();
</script>
</body>
</html>

javascript - 複数のフォームの検証と値の計算

1 に答える 1

Related

Reference