Php 禁用表单上的“提交”按钮，直到字段完成

我目前正在做一个营销页面。它有一个表单，要求用户输入他们的姓名、邮政编码和电子邮件地址。一旦用户这样做，它将要求他们选择一个位置接近他们的优惠券。该表单当前仅在用户填写其邮政编码时显示位置。否则它会显示一个框，告诉他们输入邮政编码。我正在努力让用户也被要求输入电子邮件地址。我试图将代码设置为仅当两个位置都已填充时才显示位置。这是我不能上班的东西

<form id="sportsclips">
                    <div id="return-data"></div>
                    <input type="text" id="fullname" name="fullname" tabindex="1000" maxlength="35" placeholder="Full Name" />
                    <input type="text" id="email" name="email" tabindex="2000" maxlength="45" placeholder="Email Address *" />
                    <input type="text" id="zipcode" name="zipcode" tabindex="4000" maxlength="5" placeholder="Zip Code *" />                        

                    <a href="javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';zipit(document.getElementById('zipcode').value);" class="coupon" >GET MY COUPON</a>

                    <div id="light" class="white_content">
                    <h1>SELECT A PARTICIPATING LOCATION TO RECEIVE YOUR COUPON</h1>
                    <div class="col-sm-12" style="height: 35px !important;"></div>

                   <div class="col-sm-12" style="margin-bottom: 20px !important;"><a href="javascript:void(0)" class="cls" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';">X</a></div>

                   <div id="data"></div>



                    </div>

                    </form>

生成结果的php如下所示：

<?php

if(isset($_POST['zipcode']) && $_POST['zipcode'] != "" && $_POST['email'] != "" )
{
    # vars
    $country     = 'US';
    $apiKey      = 'AIzaSyA39tPZzpT6KxjVEvmSFV_yWdR7kQvL0zU';
    $latitude    = '';
    $longitude   = '';
    $link        = '';
    $sql         = '';
    $result      = '';
    $earthRadius = '';

    # connect to the google geocode service
    $file = "https://maps.googleapis.com/maps/api/geocode/xml?address=".$_POST['zipcode'].",".$country."&amp;output=csv&amp;key=".$apiKey."";

    # load xml
    $xml = simplexml_load_file($file) or die("url not loading");

    # check if status is good
    $status = $xml->status;

    if ($status == "OK") 
    {
            # grab latitude and longitude from zip to match against db
            $latitude = $xml->result->geometry->location->lat;
            $longitude = $xml->result->geometry->location->lng; 

            # Build the spherical geometry SQL string
            $earthRadius = '3963.0'; // In miles

            # db connect if post is true
            $link = mysql_connect('localhost','haircutp_spor7Cl','~=L6QK%%lck-{dZ,Of');

            if(!($link))
            {
                echo "Error Connecting to the Database".mysql_error();
            }
            else 
            {
                mysql_select_db('haircutp_ca_promo');           
            }

            # db call to locations by lat / long
            $sql = "
                SELECT ROUND(
                        ".$earthRadius." * ACOS(  
                            SIN( ".$latitude."*PI()/180 ) * SIN( latitude*PI()/180 )
                            + COS( ".$latitude."*PI()/180 ) * COS( latitude*PI()/180 )  *  COS( (longitude*PI()/180) - (".$longitude."*PI()/180) )   ) 
                    , 1)
                    AS distance, store_name, postal_address, latitude, longitude, phone, store_id 
                FROM stores
                ORDER BY distance ASC LIMIT 3";

            # Search the database for the nearest agents
            $result = mysql_query($sql);

            # run loop on locations
            while ($row = mysql_fetch_array($result))
            {
                echo '<div class="col-sm-4 loc">';
                echo '<strong>'.$row['store_name'].'</strong><br />';
                echo ''.$row['postal_address'].'<br />';
                echo '<a href="tel:1-'.$row['phone'].'" class="ph">'.$row['phone'].'</a><br />';
                echo '<br />~ '.$row['distance'].' miles ~<br /><br />';
                echo '<input type="button" id="sendcoupon_'.$row['store_id'].'" name="sendcoupon_'.$row['store_id'].'" onclick="spc(\''.$row['store_id'].'\')" tabindex="6000" value="GET COUPON" />';
                echo '</div>';
            }

            mysql_close($link);
    }
}
else
{
    # if not zip code
    echo '<div class="col-sm-6 loc">';
    echo '<strong>You Must Input Your Zip Code and Email Address. Please Try Again!</strong><br />';
    echo '</div>';  
}


?>

---

您可以使用输入的required属性，但它取决于浏览器，所以更好的方法是自己在Javascript中检查它

所需属性的示例：

<input type="text" name="myfield" required />

---

代码：这就是你如何使它成为必需的，还有什么是必需的？是的，但是你仍然可以单击“获取我的优惠券”链接，打开带有可用位置的框并提交表单。只需在标记的末尾添加必需的，所有的req字段都必须在表单中。不幸的是，这不起作用。它只是将其高亮显示为红色。我仍然可以点击提交。理想情况下，该窗口当前会显示一个错误，表示如果未输入zip，则输入zip。如果两者都未输入，则需要说明和电子邮件。请仔细阅读我所写的内容