1. дома
  2. Вопрос и ответ
  3. Формы ... Как сделать разделы обязательными?

Формы ... Как сделать разделы обязательными?

2015-11-17 5 views
0

В основном в разделе сведений о доставке я хотел бы, чтобы они были обязательными ... Я знаю, как это сделать, но как это сделать, когда они нажимают кнопку «Оформить заказ», чтобы проверить, что все необходимые текстовые поля заполненный до перехода в раздел оплаты ....?Формы ... Как сделать разделы обязательными?

<!DOCTYPE html> 
<!-- HTML Select Junior Example 0.4               --> 
<!-- Please note the code on these pages are provided by WorldPay as working examples only. --> 
<!-- Any changes you make to the copies of these pages will not be supported by WorldPay.  --> 
<!-- For further information on reading html see the supplied help section.     --> 

<html> 
<!-- The name, style, and properties of the page are defined in the 'head' tags --> 
<head> 
    <title>Pixboard Postage Price</title> 
    <meta http-equiv="Content-Type" content="text/html"> 
    <meta name="description" content="Junior HTML Example 0.4"> 
    <meta name="keywords" content="Junior, html"> 
    <style type="text/css"> td {text-align:"left"; vertical-align:"middle"; font-family:"arial"; color:"black"} h1,h2,h3,h4,h5,h6,h7 {text-align:"center"; vertical-align:"middle"; font-family:"arial"; color:"black"}</style> 
</head> 

<!-- The content to be used on the page is placed between the 'body' tags. --> 
<body> 

<!-- This is a purchase token, for more information on the elements with in a purchase token see the supplied help section. --> 
<!-- PLEASE NOTE: this is a test installation and values will require changing to reflect merchants requirements --> 
<form action="https://secure-test.worldpay.com/wcc/purchase" method="post" name="BuyForm"> 
    <input type="hidden" name="instId" value="211616"><!-- The "instId" value "0000000" should be replaced with the Merchant's own installation Id --> 
    <input type="hidden" name="cartId" value="abc123"><!-- This is a unique identifier for merchants use. Example: PRODUCT123 --> 
    <input type="hidden" name="currency" value="GBP"><!-- Choose appropriate currency that you would like to use --> 
    <input type="hidden" name="desc" value=""> 
    <input type="hidden" name="testMode" value="100"> 

    <!-- JavaScript is used to give functionality to some of the pages elements --> 
    <script language="JavaScript"> 

     // The next two functions round numbers to numerical formatting. They do not need to be altered when adding or removing products. 
     function roundOff(value, precision) 
     { 
      return places(value,1,precision); 
     } 

     function places(X, M, N) 
     { 
      var T, S=new String(Math.round(X*Number("1e"+N))) 

      while (S.length<M+N) S='0'+S 
      var y = S.substr(0, T=(S.length-N)); 
      if(N>0) 
      { 
       y += '.' + S.substr(T, N); 
      } 

      return y; 
     } 

     // This function checks for empty quantities. It does not need to be altered when adding or removing products. 
     function CheckNull(value) 
     { 
      if (value == "") 
      { 
       value = "0"; 
      } 

      return value; 
     } 

     // This function defines the postage and packaging location. It does not need to be altered when adding or removing products. 
     function typeOfCarriage(x,whereabouts) 
     { 
      console.log(whereabouts); 
      x.carriage_amount.value = whereabouts; 
     } 

     // This function addeds the postage and packaging to the total price of the products. Add new postage rates here, and also edit further down the page to add them to the table. 
     function calculate(x) 
     { 
      basicprice = calc(x); 
      if(Number(basicprice) > 0) 
      { 
          console.log(basicprice); 

       switch (x.carriage_amount.value) 
       { 
        case "UK" : 
        postage_and_packaging = 3.50; 
        break 
        case "US" : 
        postage_and_packaging = 20.38; 
        break 
        // To add a new postage rate. Copy from here... 
        case "asia" : 
        postage_and_packaging = 5.75; 
        break 
        // ...to here, and paste directly below. Change the case country, and the postage price. You will also need to add the postage option you have created further down the page. 
        default : 
        postage_and_packaging = 8.75; 
        break; 
       } 
       x.amount.value = basicprice + Number(postage_and_packaging); 

      } 
      else 
      { 
       x.amount.value = "0"; 
      } 

      x.amount.value = roundOff(x.amount.value,2); 
     } 

     // The standard price, exluding postage and packaging is calculated here. It does not need to be altered when adding or removing products. --> 
     function calc(x) 
     { 
      x.amount.value = 0; 
      var y = x.price.length; 
      var z = x.qty.length; 
      var a = Number(x.amount.value); 
      var b,c; 

      while(y > 0) 
      { 
       b = Number(CheckNull(x.price[y-1].value)); 
       c = Number(CheckNull(x.qty[y-1].value)); 
       a += (b * c); 
       y--; 
      } 
      return a; 
     } 

    </script> 

    <h1>Postage &amp Packaging</h1> 

    <!-- This table provides layout for the products listed. --> 
<table cellPadding="3" border="2" align="center"> 
     <tr> 
      <td colSpan="3"><b>Gift</b><input name="price" type="hidden" value="3.99"> - &pound;3.99</td> 
     </tr> 
     <tr> 
      <td>Quantity: <input name="qty" size="3" value="0"></td> 
       </tr> 
       <tr> 
      <td colSpan="3"><b>195 x 295 Pixboard</b><input name="price" type="hidden" value="10.99"> - &pound;10.99</td> 
     </tr> 
     <tr> 
      <td>Quantity: <input name="qty" size="3" value="1"></td> 
     </tr> 
    </table> 

    <br><br> 


    <!-- This table is used as the total calculator and postage and packaging selector. --> 
    <input name="carriage_amount" type="hidden" value="uk"> 
    <table cellPadding="3" border=2 align="center"> 
     <tr> 
      <td> 
       <select name=postage_and_packaging onchange="typeOfCarriage(this.form,this.value);calculate(this.form)"> 
            <OPTION SELECTED VALUE="">Please select country</option> 
            <OPTION value='AF'>Afghanistan</option> 
            <OPTION value='AL'>Albania</option> 
            <OPTION value='DZ'>Algeria</option> 
            <OPTION value='AS'>American Samoa</option> 
            <OPTION value='AD'>Andorra</option> 
            <OPTION value='AO'>Angola</option> 
            <OPTION value='AI'>Anguilla</option> 
            <OPTION value='AQ'>Antarctica</option> 
            <OPTION value='AG'>Antigua and Barbuda</option> 
            <OPTION value='AR'>Argentina</option> 
            <OPTION value='AM'>Armenia</option> 
            <OPTION value='AW'>Aruba</option> 
            <OPTION value='AU'>Australia</option> 
            <OPTION value='AT'>Austria</option> 
            <OPTION value='AZ'>Azerbaijan</option> 
            <OPTION value='BS'>Bahamas</option> 
            <OPTION value='BH'>Bahrain</option> 
            <OPTION value='BD'>Bangladesh</option> 
            <OPTION value='BB'>Barbados</option> 
            <OPTION value='BY'>Belarus</option> 
            <OPTION value='BE'>Belgium</option> 
            <OPTION value='BZ'>Belize</option> 
            <OPTION value='BJ'>Benin</option> 
            <OPTION value='BM'>Bermuda</option> 
            <OPTION value='BT'>Bhutan</option> 
            <OPTION value='BO'>Bolivia</option> 
            <OPTION value='BA'>Bosnia and Herzegovina</option> 
            <OPTION value='BW'>Botswana</option> 
            <OPTION value='BV'>Bouvet Island</option> 
            <OPTION value='br'>brazil</option> 
            <OPTION value='IO'>british Indian Ocean Territory</option> 
            <OPTION value='BN'>brunei Darussalam</option> 
            <OPTION value='BG'>Bulgaria</option> 
            <OPTION value='BF'>Burkina Faso</option> 
            <OPTION value='BI'>Burundi</option> 
            <OPTION value='KH'>Cambodia</option> 
            <OPTION value='CM'>Cameroon</option> 
            <OPTION value='CA'>Canada</option> 
            <OPTION value='CV'>Cape Verde</option> 
            <OPTION value='KY'>Cayman Islands</option> 
            <OPTION value='CF'>Central African Republic</option> 
            <OPTION value='td'>Chad</option> 
            <OPTION value='CL'>Chile</option> 
            <OPTION value='CN'>China</option> 
            <OPTION value='CX'>Christmas Island</option> 
            <OPTION value='CC'>Cocos (Keeling) Islands</option> 
            <OPTION value='CO'>Colombia</option> 
            <OPTION value='KM'>Comoros</option> 
            <OPTION value='CG'>Congo</option> 
            <OPTION value='CK'>Cook Islands</option> 
            <OPTION value='CR'>Costa Rica</option> 
            <OPTION value='HR'>Croatia</option> 
            <OPTION value='CU'>Cuba</option> 
            <OPTION value='CY'>Cyprus</option> 
            <OPTION value='CZ'>Czech Republic</option> 
            <OPTION value='CI'>Côte d'Ivoire</option> 
            <OPTION value='DK'>Denmark</option> 
            <OPTION value='DJ'>Djibouti</option> 
            <OPTION value='DM'>Dominica</option> 
            <OPTION value='DO'>Dominican Republic</option> 
            <OPTION value='TP'>East Timor</option> 
            <OPTION value='EC'>Ecuador</option> 
            <OPTION value='EG'>Egypt</option> 
            <OPTION value='SV'>El salvador</option> 
            <OPTION value='GQ'>Equatorial Guinea</option> 
            <OPTION value='ER'>Eritrea</option> 
            <OPTION value='EE'>Estonia</option> 
            <OPTION value='ET'>Ethiopia</option> 
            <OPTION value='FK'>Falkland Islands</option> 
            <OPTION value='FO'>Faroe Islands</option> 
            <OPTION value='FJ'>Fiji</option> 
            <OPTION value='FI'>Finland</option> 
            <OPTION value='FR'>France</option> 
            <OPTION value='GF'>French Guiana</option> 
            <OPTION value='PF'>French Polynesia</option> 
            <OPTION value='TF'>French Southern Territories</option> 
            <OPTION value='GA'>Gabon</option> 
            <OPTION value='GM'>Gambia</option> 
            <OPTION value='GE'>Georgia</option> 
            <OPTION value='DE'>Germany</option> 
            <OPTION value='GH'>Ghana</option> 
            <OPTION value='GI'>Gibraltar</option> 
            <OPTION value='GR'>Greece</option> 
            <OPTION value='GL'>Greenland</option> 
            <OPTION value='GD'>Grenada</option> 
            <OPTION value='GP'>Guadeloupe</option> 
            <OPTION value='GU'>Guam</option> 
            <OPTION value='GT'>Guatemala</option> 
            <OPTION value='GN'>Guinea</option> 
            <OPTION value='GW'>Guinea-Bissau</option> 
            <OPTION value='GY'>Guyana</option> 
            <OPTION value='HT'>Haiti</option> 
            <OPTION value='HM'>Heard Island and McDonald Islands</option> 
            <OPTION value='VA'>Holy See (Vatican City State)</option> 
            <OPTION value='HN'>Honduras</option> 
            <OPTION value='HK'>Hong Kong</option> 
            <OPTION value='HU'>Hungary</option> 
            <OPTION value='IS'>Iceland</option> 
            <OPTION value='IN'>India</option> 
            <OPTION value='ID'>Indonesia</option> 
            <OPTION value='IR'>Iran</option> 
            <option value='IE'>Ireland</option> 
            <option value='IL'>Israel</option> 
            <option value='IT'>Italy</option> 
            <option value='JM'>Jamaica</option> 
            <option value='JP'>Japan</option> 
            <option value='JO'>Jordan</option> 
            <option value='KZ'>Kazakstan</option> 
            <option value='KE'>Kenya</option> 
            <option value='KI'>Kiribati</option> 
            <option value='KW'>Kuwait</option> 
            <option value='KG'>Kyrgystan</option> 
            <option value='LA'>Lao</option> 
            <option value='LV'>Latvia</option> 
            <option value='LB'>Lebanon</option> 
            <option value='LS'>Lesotho</option> 
            <option value='LR'>Liberia</option> 
            <option value='LY'>Libyan Arab Jamahiriya</option> 
            <option value='LI'>Liechtenstein</option> 
            <option value='LT'>Lithuania</option> 
            <option value='LU'>Luxembourg</option> 
            <option value='MO'>Macau</option> 
            <option value='MK'>Macedonia (FYR)</option> 
            <option value='MG'>Madagascar</option> 
            <option value='MW'>Malawi</option> 
            <option value='MY'>Malaysia</option> 
            <option value='MV'>Maldives</option> 
            <option value='ML'>Mali</option> 
            <option value='MT'>Malta</option> 
            <option value='MH'>Marshall Islands</option> 
            <option value='MQ'>Martinique</option> 
            <option value='MR'>Mauritania</option> 
            <option value='MU'>Mauritius</option> 
            <option value='YT'>Mayotte</option> 
            <option value='MX'>Mexico</option> 
            <option value='FM'>Micronesia</option> 
            <option value='MD'>Moldova</option> 
            <option value='MC'>Monaco</option> 
            <option value='MN'>Mongolia</option> 
            <option value='MS'>Montserrat</option> 
            <option value='MA'>Morocco</option> 
            <option value='MZ'>Mozambique</option> 
            <option value='MM'>Myanmar</option> 
            <option value='NA'>Namibia</option> 
            <option value='NR'>Nauru</option> 
            <option value='NP'>Nepal</option> 
            <option value='NL'>Netherlands</option> 
            <option value='AN'>Netherlands Antilles</option> 
            <option value='NT'>Neutral Zone</option> 
            <option value='NC'>New Caledonia</option> 
            <option value='NZ'>New Zealand</option> 
            <option value='NI'>Nicaragua</option> 
            <option value='NE'>Niger</option> 
            <option value='NG'>Nigeria</option> 
            <option value='NU'>Niue</option> 
            <option value='NF'>Norfolk Island</option> 
            <option value='KP'>North Korea</option> 
            <option value='MP'>Northern Mariana Islands</option> 
            <option value='NO'>Norway</option> 
            <option value='OM'>Oman</option> 
            <option value='PK'>Pakistan</option> 
            <option value='PW'>Palau</option> 
            <option value='PA'>Panama</option> 
            <option value='PG'>Papua New Guinea</option> 
            <option value='PY'>Paraguay</option> 
            <option value='PE'>Peru</option> 
            <option value='PH'>Philippines</option> 
            <option value='PN'>Pitcairn</option> 
            <option value='PL'>Poland</option> 
            <option value='PT'>Portugal</option> 
            <option value='PR'>Puerto Rico</option> 
            <option value='QA'>Qatar</option> 
            <option value='RE'>Reunion</option> 
            <option value='RO'>Romania</option> 
            <option value='RU'>Russian Federation</option> 
            <option value='RW'>Rwanda</option> 
            <option value='SH'>Saint Helena</option> 
            <option value='KN'>Saint Kitts and Nevis</option> 
            <option value='LC'>Saint Lucia</option> 
            <option value='PM'>Saint Pierre and Miquelon</option> 
            <option value='VC'>Saint Vincent and the Grenadines</option> 
            <option value='WS'>Samoa</option> 
            <option value='SM'>San Marino</option> 
            <option value='ST'>Sao Tome and Principe</option> 
            <option value='SA'>Saudi Arabia</option> 
            <option value='SN'>Senegal</option> 
            <option value='SC'>Seychelles</option> 
            <option value='SL'>Sierra Leone</option> 
            <option value='SG'>Singapore</option> 
            <option value='SK'>Slovakia</option> 
            <option value='SI'>Slovenia</option> 
            <option value='SB'>Solomon Islands</option> 
            <option value='SO'>Somalia</option> 
            <option value='ZA'>South Africa</option> 
            <option value='GS'>South Georgia</option> 
            <option value='KR'>South Korea</option> 
            <option value='ES'>Spain</option> 
            <option value='LK'>Sri Lanka</option> 
            <option value='SD'>Sudan</option> 
            <option value='SR'>Suriname</option> 
            <option value='SJ'>Svalbard and Jan Mayen Islands</option> 
            <option value='SZ'>Swaziland</option> 
            <option value='SE'>Sweden</option> 
            <option value='CH'>Switzerland</option> 
            <option value='SY'>Syria</option> 
            <option value='TW'>Taiwan</option> 
            <option value='TJ'>Tajikistan</option> 
            <option value='TZ'>Tanzania</option> 
            <option value='TH'>Thailand</option> 
            <option value='TG'>Togo</option> 
            <option value='TK'>Tokelau</option> 
            <option value='TO'>Tonga</option> 
            <option value='TT'>trinidad and Tobago</option> 
            <option value='TN'>Tunisia</option> 
            <option value='tr'>Turkey</option> 
            <option value='TM'>Turkmenistan</option> 
            <option value='TC'>Turks and Caicos Islands</option> 
            <option value='TV'>Tuvalu</option> 
            <option value='UG'>Uganda</option> 
            <option value='UA'>Ukraine</option> 
            <option value='AE'>United Arab Emirates</option> 
            <option value='UK'>United Kingdom</option> 
            <option value='UM'>United States Minor Outlying Islands</option> 
            <option value='US'>United States of America</option> 
            <option value='UY'>Uruguay</option> 
            <option value='UZ'>Uzbekistan</option> 
            <option value='VU'>Vanuatu</option> 
            <option value='VE'>Venezuela</option> 
            <option value='VN'>Viet Nam</option> 
            <option value='VG'>Virgin Islands (british)</option> 
            <option value='VI'>Virgin Islands (U.S.)</option> 
            <option value='WF'>Wallis and Futuna Islands</option> 
            <option value='EH'>Western Sahara</option> 
            <option value='YE'>Yemen</option> 
            <option value='YU'>Yugoslavia</option> 
            <option value='ZR'>Zaire</option> 
            <option value='ZM'>Zambia</option> 
            <option value='ZW'>Zimbabwe</option> 
       </select> 
       <p> 
        <input name="calcButton" onclick="calculate(this.form)" type=button value="Calculate Total"> 
        <p> 
         <b>Total: &pound; </b><input name="amount" size=8 value="0"> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

<p align="center"> 
<action="demo_form.asp" method="get"> 
    <input type="checkbox" name="vehicle" value="Bike"> Free Pen<br> 
</p> 
<div id="PDF"> 

<b>Delivery Details</b> 
<p> 
    <label>Full Name</label> 
       <input type = "text" 
        id = "myText" 
        value = "text here" /> 
           </p> 
<p> 
            <label>Phone Number</label> 
                 <input type = "text" 
                     id = "myText" 
                     value = "Mobile" /> 
</p> 
<p> 
            <label>Phone Number</label> 
                 <input type = "text" 
                     id = "myText" 
                     value = "Home Phone" /> 
</p> 
<p> 
            <label>Email</label> 
                 <input type = "text" 
                     id = "myText" 
                     value = "Email Address" /> 
</p> 

<b>Home Address</b> 
<p> 
    <label>Address</label> 
       <input type = "text" 
        id = "myText" 
        value = "" /> 
           </p> 
<p> 
            <label>Town/city</label> 
                 <input type = "text" 
                     id = "myText" 
                     value = "" /> 
</p> 
<p> 
            <label>Country</label> 
                 <input type = "text" 
                     id = "myText" 
                     value = "" /> 
</p> 
<p> 
            <label>Post Code</label> 
                 <input type = "text" 
                     id = "myText" 
                     value = "" /> 
</p> 
</div> 


<!-- This generates a button that submits the information and send the user into the Worldpay payment pages. --> 
<p align="center"><input type=submit value=Checkout onclick="calculate(this.form)"></p> 

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

источник

2015-11-17 George Gibson

ответ

0

Используйте обязательный тег в своих полях!

<form action="demo_form.asp"> 
    Username: <input type="text" name="usrname" required> 
    <input type="submit"> 
</form>

От http://www.w3schools.com/tags/att_input_required.asp

Поскольку веб-браузер Safari не поддерживает "необходимый" тег,

var forms = document.getElementsByTagName('form'); 
for (var i = 0; i < forms.length; i++) { 
    forms[i].noValidate = true; 

    forms[i].addEventListener('submit', function(event) { 
     //Prevent submission if checkValidity on the form returns false. 
     if (!event.target.checkValidity()) { 
      event.preventDefault(); 
      //Implement you own means of displaying error messages to the user here. 
     } 
    }, false); 
}

Этот кусок Javascript должен быть хорошим обходным путь, получить более подробную информацию по этой ссылке:

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

источник

2015-11-17 11:50:45

+0

ах ладно спасибо, но если у меня есть кнопка выписки, я просто добавлю к этому? –

+0

oh, подождите, пока у него уже есть один, поэтому он должен работать тогда? –

+0

хорошо, просто попробовал, и он не будет работать с тем, который уже внутри него? –

 Смежные вопросы

  • Нет связанных вопросов^_^