表单验证提交和姓名和城市提交输出中的首字母大写

Question

您好，这是我的表单验证提交的最后一次求助。当我验证失败时，表单仍然提交。如果我什至没有通过一次验证，我需要知道如何阻止表单提交。

如果可能，我需要在提交时按以下格式打印“名称”和“城市”字段。

                           Name: Namestring
                           City: Citystring

在“Name”和“City”的字符串中，必须以大写字母开头，后跟所有小写字母。

例如，如果用户键入“peTer. ”在名称框中，“Philadelphia”在城市框中，输出消息应显示为：彼得或城市。第一个字母必须始终是大写 via 提交时的输出。基本上无论我如何在输出中输入名称和城市字段，第一个字母都是大写字母，其余字母是小写字母。

function doClear()
{
    document.PizzaForm.customer.value ="";
    document.PizzaForm.address.value = "";
    document.PizzaForm.city.value = "";
    document.PizzaForm.state.value="PA";
    document.PizzaForm.zip.value="";
    document.PizzaForm.phone.value="";
    document.PizzaForm.email.value="";


    document.PizzaForm.sizes[0].checked = false;
    document.PizzaForm.sizes[1].checked = false;
    document.PizzaForm.sizes[2].checked = false;
    document.PizzaForm.sizes[3].checked = false;

    document.PizzaForm.toppings[0].checked = false;
    document.PizzaForm.toppings[1].checked = false;
    document.PizzaForm.toppings[2].checked = false;
    document.PizzaForm.toppings[3].checked = false;
    document.PizzaForm.toppings[4].checked = false;
    document.PizzaForm.toppings[5].checked = false;
    document.PizzaForm.toppings[6].checked = false;
    document.PizzaForm.toppings[7].checked = false;
    document.PizzaForm.toppings[8].checked = false;

    return;
}

function validateMe() {

   if ( !(validateText() && validateRadio() && validateTops()) ) {
      return false;
   }

    var toppings = ""
    for(i=0;i<document.PizzaForm.toppings.length;i++){
        if(document.PizzaForm.toppings[i].checked)
            toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
    }

    alert("Name:" + " " + document.PizzaForm.customer.value + 
          '\n' + 
          "Address:" + " " + document.PizzaForm.address.value + 
          '\n' +
          "City:" + " " + document.PizzaForm.city.value +
          '\n' +
          "State:" + " " + document.PizzaForm.state.value +
          '\n' +
          "Zip:" + " " + document.PizzaForm.zip.value +
          '\n' +
          "Phone:" + " " + document.PizzaForm.phone.value +
          '\n' +
          "Email:" + " " + document.PizzaForm.email.value +
          '\n' +
          "Size:" + " " + document.PizzaForm.sizes.value +
          '\n' +
          "Toppings:" + " " + toppings);
    return;
}
function validateText()
{
    var customer = document.PizzaForm.customer.value;
    if (customer.length == 0)
    {
        alert("Please enter your name.")
    }
    var address = document.PizzaForm.address.value;
    if (address.length == 0)
    {
        alert("Please enter your address.")
    }
    var city = document.PizzaForm.city.value;
    if (city.length == 0)
    {
        alert("Please enter your city.")
    }
    var state = document.PizzaForm.state.value;
    if (state.length == 0)
    {
        alert("Please enter your state.")
    }
    var zip = document.PizzaForm.zip.value;
    if (document.PizzaForm.zip.value == "" ||
    isNaN( document.PizzaForm.zip.value ) ||
    document.PizzaForm.zip.value.length != 5 )
    {
        alert("Please enter the required zip code format.")
    }

    var phone = document.PizzaForm.phone.value;
    if (!/^\d{3}-\d{3}-\d{4}$/.test(document.PizzaForm.phone.value)) {
    alert("Please enter the correct phone format xxx-xxx-xxxxx.");

    }

    var email = document.PizzaForm.email.value;
        atpos = email.indexOf("@");
        dotpos = email.lastIndexOf(".");
    if (atpos < 1 || ( dotpos - atpos < 2 ))
    {
        alert("Please enter a valid email address.")
        return false;
    }
        return true;
}


function validateRadio()
{
    if (document.PizzaForm.sizes[0].checked) return true;
    if (document.PizzaForm.sizes[1].checked) return true;
    if (document.PizzaForm.sizes[2].checked) return true;
    if (document.PizzaForm.sizes[3].checked) return true;
    if (document.PizzaForm.sizes.value == false);
    {
        alert("Please select a pizza size.");
    }
    return;
}

function validateTops()
{
    if (document.PizzaForm.toppings[0].checked == false &&
        document.PizzaForm.toppings[1].checked == false &&
        document.PizzaForm.toppings[2].checked == false &&
        document.PizzaForm.toppings[3].checked == false &&
        document.PizzaForm.toppings[4].checked == false &&
        document.PizzaForm.toppings[5].checked == false &&
        document.PizzaForm.toppings[6].checked == false &&
        document.PizzaForm.toppings[7].checked == false &&
        document.PizzaForm.toppings[8].checked == false)
        {
            alert("Please select a topping of your choice.");
        }
            return false;
            return true;
}


</script> 
</head>
<body>

<form name="PizzaForm"   onsubmit="return validateMe()">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your Name, Address, City, State Phone number, and Email:</h4>
<font face ="Courier New">
Name: &nbsp;&nbsp;&nbsp;<Input name="customer" size="50" type="text"><br>
Address:&nbsp;<Input name="address" size="50" type="text"><br>
City:  &nbsp;&nbsp;&nbsp;<Input name="city" size="15"type="text">
State:<select name="state"> 
      <option value="">Select</option>
      <option value="PA">PA</option>
      <option value="NJ">NJ</option>
      <option value="NY">NY</option>
      <option value="DE">DE</option>
      </select>
Zip:<Input name="zip" size="7"type="text"><br>
Phone: &nbsp;&nbsp;<Input name="phone" size="50"type="text"><br>
Email: &nbsp;&nbsp;<Input name="email" size="31"type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="Plain">Plain<br>
</font>
</p>
<!--
========================================================
The submit and clear form buttons below.
========================================================
-->
<input type="button" value="Submit Order" onClick="Submit Order">
<input type="button" value="Clear Entries" onClick="doClear()">

</form>
</body>

</html>

我需要能够满足我要求的最小代码。仅 Java 脚本而非 JQuery，因为我在该领域没有经验。

谢谢大家

Answer 1

利用表单的 onsubmit 属性。

HTML：

<form onsubmit="return validateMe()">
   <!-- whatever fields go here -->
</form>

Javascript：

function validateMe() {
   // Return false if invalid input.
   if ( !(validateText() && validateRadio() && validateTops()) ) {
      return false;
   }

   // Otherwise, we're planning on submitting the form.
   // Alert a confirmation and return true.

   var toppings = "";
   for(i=0;i<document.PizzaForm.toppings.length;i++){
     if(document.PizzaForm.toppings[i].checked)
        toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
   }

   alert("Name:" + " " + document.PizzaForm.customer.value + 
      '\n' + 
      "Address:" + " " + document.PizzaForm.address.value + 
      '\n' +
      "City:" + " " + document.PizzaForm.city.value +
      '\n' +
      "State:" + " " + document.PizzaForm.state.value +
      '\n' +
      "Zip:" + " " + document.PizzaForm.zip.value +
      '\n' +
      "Phone:" + " " + document.PizzaForm.phone.value +
      '\n' +
      "Email:" + " " + document.PizzaForm.email.value +
      '\n' +
      "Size:" + " " + document.PizzaForm.sizes.value +
      '\n' +
      "Toppings:" + " " + toppings);

   return true;
}

将您的“提交订单”按钮更改为：

<input type="submit" value="Submit Order">

您可以完全删除 doSubmit 函数。

字符串首字母大写：

function capitalizeString(stringToCapitalize) {
    var words = stringToCapitalize.split(' ');
    for (var i=0, il=words.length; i<il; i++) {
        if (words[i].length > 0) {
            words[i] = words[i].charAt(0).toUpperCase()
                       + words[i].substring(1, words[i].length);
        }
    }
    return words.join(' ');
}

就你的城市而言：

alert("City: " + capitalizeString(document.PizzaForm.city.value));