0

4つの必須フィールドのうち2つだけが検証されるjqueryバリデータースクリプトを含むphpフォームがあります。検証される2つのフィールドは、名前と電子メールですが、何も入力しない場合、エラーメッセージには「名前を入力してください」ではなく「アルファベット文字のみ」と表示されます。デザインでは、それぞれの名前を入力する必要がありました。フィールドをフォームのプレースホルダーとして使用しているので、これが正しく機能しない理由がわかりません。バランスを取るために、各フィールドの名前をフォームの外に置き、cssspanクラスのdisplayで非表示にしました。スクリプトはまだそれを取得していません。何か提案はありますか？

  <?php 
   function isRequestSet( $name ) { 
if ( isset ( $_REQUEST[$name] ) ) { 
    return ( $_REQUEST[$name] != "" ) ;
}
return false;
    }

    $name = "";
    if ( isRequestSet('name' ) ) { 
$name = $_REQUEST['name'];
     } 
    $number = "";
     if ( isRequestSet('number') ) { 
$number = $_REQUEST['number'];
    }
    $email = "";
    if ( isRequestSet( 'email' ) ) { 
$email = $_REQUEST['email'];
    }
    $postcode = "";
    if ( isRequestSet('postcode' ) ) { 
$location = $_REQEUST['postcode'];
     }

    $how_did_you_hear_about_us = array();
    if ( isset( $_REQUEST['how_did_you_hear_about_us'] )  ) { 
$how_did_you_hear_about_us = $_REQUEST['how_did_you_hear_about_us']; 
    }

    $message = "";
    if ( isRequestSet('message' ) ) { 
$location = $_REQEUST['message'];
    }
    $apartment_price_range = array();
    if ( isset( $_REQUEST['apartment_price_range'] )  ) { 
$apartment_price_range = $_REQUEST['apartment_price_range']; 
    }


    if ( ($name !="") && ($number != "") && ($email != "") && ($isspam !="yes") ) { 
$to = 'name@email.com';
$from = $to;
$headers =  'From: ' . $to . "\n" .
            'Reply-To: ' . $to . "\n";
$vars = array( 'name' , 'number' , 'email' , 'postcode' , 'message' ) ;
$message = "-----------\n" ;
foreach ( $vars as $v ) { 
    $value = $_REQUEST[$v];
    $message .= "$v:\t$value\n";
}
$message .= "-----------\n" ;
$message .= "\nHow did you hear about us?:\n"  ;
foreach ( $how_did_you_hear_about_us as $how_did_you_hear_about_us ) { 

    $message .= "$how_did_you_hear_about_us\n" ; 
}

$message .= "-----------\n" ;
$message .= "\nApartment price range:\n"  ;
foreach ( $apartment_price_range as $apartment_price_range ) { 

    $message .= "$apartment_price_range\n" ; 
}
$subject = "From: $name <$email>";
mail( $to , $subject , $message , $headers,  "-f $from" );
$confirm = true;
    } else { 
$confirm = false;
    }

    ?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
      <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
       <link href="css/graphite.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/graphitephone.css" rel="stylesheet" media="handheld, only screen and (max-device-width: 480px)" />
      <script src="js/gen_validatorv4.js" type="text/javascript"></script>
        <style>
       span {display: none;}</style>
        </head>

      <body onload="javascript:preload">
      <div id="container">
         <div id="header"><a href="index.html" target="_self"><img src="images/HomeBanner.jpg" width="900" height="162" border="0" /></a>
         <div id="ruler"></div><!--end header-->
         <div id="nav">
<ul>
    <li class="list1"><a href="index.html" id="item1"><span class="none">STORY</span></a></li>
    <li class="list2"><a href="#" id="item2"><span class="none">APARTMENTS</span></a>
   <ul>
        <li class="list7"><a href="gallery.html" id="item7"><span class="none">GALLERY</span></a></li>
        <li class="list8"><a href="floorplans.php" id="item8"><span class="none">FLOORPLANS</span></a></li>
        </ul>
    </li>
    <li class="list3"><a href="meet-the-locals.html" id="item3"><span class="none">MEET THE LOCALS</span></a></li>
     <li class="list4"><a href="meet-the-creators.html" id="item4"><span class="none">MEET THE CREATORS</span></a></li>
     <li class="list5"><a href="location.html" id="item5"><span class="none">LOCATION</span></a></li>
     <li class="current6"><span class="none">CONTACT</span></li>
</ul>
          </div><!--end nav-->

     <div id="main">


          <div id="contactform">
           <table width="250px" border="0" cellspacing="0px" cellpadding="0px">
           <form name="myform" method="post" action="" />
           <input type='hidden' name='submitted' value='yes' />
            <tr>
           <td colspan="2"><?php
            if ($confirm ) { 
              echo "<p>Thank you for enquiry</p>
               <p>We will contact you shortly to advise on apartment availability and pricing.<p>";
              } else { 
            if (isRequestSet( 'submitted' ) && $_REQUEST['submitted'] == "yes" ) { 
    echo "Request not sent, please complete all required fields marked '*'.";
}
              }             
         ?></td>
            </tr>
               <tr>
                 <td colspan="2" valign="middle"><p><span>name</span><input type="text" name="name" placeholder="Name*" id="contact_name" /></p></td>
               </tr>
                <tr>
                  <td colspan="2" valign="middle">
           <table width="250px" border="0" cellspacing="0px" cellpadding="0px">
                 <tr>
                <td bgcolor="#FFF" valign="baseline" height="10px"><p><img src="images/spacer.gif" width="1" height="5" /><span>number</span><input type="text" name="number" placeholder="Contact Number*" id="contact_number" /></p></td>
            <td width="8px" height="10px"><img src="images/spacer.gif" width="8" height="5" /></td>
              <td bgcolor="#FFF" valign="baseline" height="10px"><p><img src="images/spacer.gif" width="1" height="5" /><span>postcode</span><input type="text" name="postcode" placeholder="Postcode*" id="contact_postcode" /></p></td>
                </tr>
             <tr><td><img src="images/spacer.gif" width="1" height="6" /></td></tr>
              </table></td></tr>
              <tr>
            <td colspan="2" valign="middle"><p><span>email</span><input type="text" name="email" placeholder="Email*" id="contact_email" /></p></td>
          </tr>
             <tr>
            <td colspan="2"><p><select name="how_did_you_hear_about_us[]" id="" class='select-box'>
            <option label="How did you hear about us?" value="0">How did you hear about us?</option>
            <option label="realestate.com.au" value="realestate.com.au">realestate.com.au</option>
              <option label="domain.com.au" value="domain.com.au">domain.com.au</option>
               <option label="the age" value="the age">the age</option>
           <option label="the herald sun" value="the herald sun">the herald sun</option>
            <option label="billboard" value="billboard">billboard</option>
               <option label="bpmcorp.com.au" value="bpmcorp.com.au">bpmcorp.com.au</option>
                 <option label="google" value="google">google</option>
             <option label="site signage" value="site signage">site signage</option>
              <option label="other" value="other">other - please state in box below</option>
                </select></p></td>
               </tr>
                 <tr>
                <td colspan="2"><p>
                    <textarea name="message" cols="33" style="background:#fff; border:0px;" placeholder="What would you like to know?"></textarea>
</p></td>
             </tr>
            <tr>
             <td><p>Price?</p></td><td rowspan="4" valign="top" align="right"><input type="image" class="rollover" id="contact_submit" src="images/buttons/BTN_Submit.png" alt="Submit" width="72px" height="68px" border="0" hover="images/BTN_Submit_over.png" name="Submit" value="Login"></td>
           </tr>
              <tr>
            <td valign="middle"><p><input name="apartment_price_range[]" type="checkbox" value="350k-400k" style="background:#F9DC31; color: #000000;" />&nbsp;&nbsp;350k-400k</p></td></tr>
            <tr>
              <td><p><input name="apartment_price_range[]" type="checkbox" value="450k-550k" background="#F9DC31" />&nbsp;&nbsp;450k-550k</p></td></tr>
          <tr><td><p><input name="apartment_price_range[]" type="checkbox" value="550k+" background="#F9DC31" />&nbsp;&nbsp;550k+</p></td></tr>
                </form>
                <tr><td colspan="2"><p class="italics" style="font-size:10px;">* denotes a required field</p>             </td>
                   </tr>
                  <tr>
              <td colspan="2"></td></tr>
                   </table>
                   </div><!--end contact form-->

                </div><!--end left-->
                 </div><!--end main-->


                   </div><!--end container-->

                   <script language="JavaScript" type="text/javascript"
xml:space="preserve">//<![CDATA[
                  //You should create the validator only after the definition of the HTML form
                  var frmvalidator  = new Validator("myform");
                   frmvalidator.addValidation("name","req","Please enter your name");
                     frmvalidator.addValidation("name","alpha_s","Alphabetic chars only");

                     frmvalidator.addValidation("number","maxlen=50");
                     frmvalidator.addValidation("number","req");
                     frmvalidator.addValidation("number","numeric_s", "Numbers only");

                      frmvalidator.addValidation("postcode","maxlen=50");
                      frmvalidator.addValidation("postcode","req");
                      frmvalidator.addValidation("postcode","numeric_s", "Numbers only");

                      frmvalidator.addValidation("email","maxlen=50");
                      frmvalidator.addValidation("email","req");
                      frmvalidator.addValidation("email","email");



                  //]]></script>

                    <script type="text/javascript" src="js/jquery.min.js"></script>
                  <script>
                  $('[placeholder]').focus(function() {
                 var input = $(this);
                   if (input.val() == input.attr('placeholder')) {
                   input.val('');
                    input.removeClass('placeholder');
                     }
                    }).blur(function() {
                    var input = $(this);
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                     input.addClass('placeholder');
                      input.val(input.attr('placeholder'));
                       }
                      }).blur().parents('form').submit(function() {
                       $(this).find('[placeholder]').each(function() {
                       var input = $(this);
                        if (input.val() == input.attr('placeholder')) {
                       input.val('');
                         }
                           })
                         });
                      </script>
                        <script src="js/load.js" type="text/javascript"></script>

                      </body>
                         </html>
4

1 に答える 1

0

"Name" gets validates as "has content" as the javascript records a value of "Name*" from the placeholder text. (Follow through in line 1088 of gen_validatorv4.js - objValue has a value of the placeholder text).

Also, as the placeholder text has an asterisk, this is not an alpha numeric - so it fails that clause - hence you see the message you see.

So, you're right, the placeholders, when pumped into the INPUT as "values" must then be removed when you validate. You could probably do this with "form_submit_handler()" by saying "if the value is the same as the placeholder, remove hte value before processing... and restore afterwards"

Another option is that I'd suggest looking at the jQuery validator at http://bassistance.de/jquery-plugins/jquery-plugin-validation/ - it's better documented as you're already running jQuery. You'll have the same problem, though, but there are pre-validation and post-validation hooks you can use to adjust the values. Just switch based on if ($('#contact_name').val() == '[placeholderText]') { $('#contact_name').val(''); }

A bit fiddly, but if you MUST have field names inside inputs, then that's a solution. (There are also other solutions involving background graphics or semi-transparent input fields. None are perfect.)

于 2012-05-28T04:58:59.887 に答える