Question

这是我简单的html表单代码

<form method="post" action=<?php echo base_url()."index.php/controller_bookplot2";?> 
 name="frmbooking" id="frmbooking">
  <div class="marginbtm5">
      <select name="name_title" class="dropdown" id="name_title" required>
        <option value="Mr.">Mr.</option>
        <option value="Miss">Miss</option>
        <option value="Mrs">Mrs</option>
        <option value="Dr.">Dr.</option>
      </select>

      <img src=<?php echo base_url()."images/rightmarked.gif";?> title="mandetory"> 
  </div>
  <div class="marginbtm5">
    <input name="name" type="text" class="input validate_B" id="name" onfocus="if (this.value
      == 'Full Name') {this.value=''}" onblur="if(this.value == '') {
      this.value='Full Name'}" value="Full Name" required>

    <img src=<?php echo base_url()."images/rightmarked.gif";?> title=" mandetory">
  </div>
  <div class="marginbtm5">
    <input name="address" type="text" class="input validate_B" id="add" onfocus="if
      (this.value == 'Address') {this.value=''}" onblur="if(this.value ==
      '') { this.value='Address'}" value="Address" required>

    <img src=<?php echo base_url()."images/rightmarked.gif";?> title=" mandetory">
  </div>
  <div class="marginbtm5">
    <input name="email" type="text" class="input validate_B" id="email" onfocus="if
     (this.value == 'Email') {this.value=''}" onblur="if(this.value ==
     '') { this.value='Email'}" required  value="Email" >

    <img src=<?php echo base_url()."images/rightmarked.gif";?> title=" mandetory"
     style="display:none;">
  </div>
  <div class="marginbtm5">
    <input name="dob" type="text" class="input" value="Birth Date" required id="datepicker" >

    <img src=<?php echo base_url()."images/rightmarked.gif";?> title=" mandetory"> 
  </div>
 <div class="marginbtm5">
    <input name="mobno" type="text" class="input validate_B" maxlength="45" onfocus="if
   (this.value == 'Mobile (10 digit mobile no. eg 9812345678)')
    {this.value=''}" onblur="if(this.value == '') { this.value='Mobile
   (10 digit mobile no. eg 9812345678)'}" value="Mobile (10 digit mobile no. eg
    9812345678)" id="mob_no" pattern="[789][0-9]{9}" required     
        onkeyup="javascript:ValidateText(this)" >
  </div>      
    <input name="btnSubmit" type="image" src=<?php echo base_url()."images/submit.jpg";?> value="Submit" onclick="return validate();">
</form>

我的表单中还有很多其他字段。但我只是把这5个字段放在这里。当我点击提交时，它直接显示移动无字段的html5所需消息。它不首先验证名称，地址，电子邮件，生日字段。那我做错了什么？

Answer 1

它不起作用，因为你给了value属性remove value属性并试试这个

<form method="post" action=<?php echo base_url()."index.php/controller_bookplot2";?> 
 name="frmbooking" id="frmbooking">
  <div class="marginbtm5">
      <select name="name_title" class="dropdown" id="name_title" required>
        <option value="">--Please select type</option>
        <option value="Mr.">Mr.</option>
        <option value="Miss">Miss</option>
        <option value="Mrs">Mrs</option>
        <option value="Dr.">Dr.</option>
      </select>

      <img src=<?php echo base_url()."images/rightmarked.gif";?> title="mandetory"> 
  </div>
  <div class="marginbtm5">
    <input name="name" type="text" class="input validate_B" id="name" onfocus="if (this.value
      == 'Full Name') {this.value=''}" onblur="if(this.value == '') {
      this.value='Full Name'}" Placeholder="Full Name" required>

    <img src=<?php echo base_url()."images/rightmarked.gif";?> title=" mandetory">
  </div>
  <div class="marginbtm5">
    <input name="address" type="text" class="input validate_B" id="add" onfocus="if
      (this.value == 'Address') {this.value=''}" onblur="if(this.value ==
      '') { this.value='Address'}" Placeholder="Address" required>

    <img src=<?php echo base_url()."images/rightmarked.gif";?> title=" mandetory">
  </div>
  <div class="marginbtm5">
    <input name="email" type="text" class="input validate_B" id="email" onfocus="if
     (this.value == 'Email') {this.value=''}" onblur="if(this.value ==
     '') { this.value='Email'}" required  Placeholder="Email" >

    <img src=<?php echo base_url()."images/rightmarked.gif";?> title=" mandetory"
     style="display:none;">
  </div>
  <div class="marginbtm5">
    <input name="dob" type="text" class="input" Placeholder="Birth Date" required id="datepicker" >

    <img src=<?php echo base_url()."images/rightmarked.gif";?> title=" mandetory"> 
  </div>
 <div class="marginbtm5">
    <input name="mobno" type="text" class="input validate_B" maxlength="45" onfocus="if
   (this.value == 'Mobile (10 digit mobile no. eg 9812345678)')
    {this.value=''}" onblur="if(this.value == '') { this.value='Mobile
   (10 digit mobile no. eg 9812345678)'}" value="Mobile (10 digit mobile no. eg
    9812345678)" id="mob_no" pattern="[789][0-9]{9}" required     
        onkeyup="javascript:ValidateText(this)" >
  </div>      
    <input name="btnSubmit" type="image" src=<?php echo base_url()."images/submit.jpg";?> value="Submit" onclick="return validate();">
</form>

如果您为输入标记添加值，则它将不会验证该字段，因为此字段已经具有值

Answer 2

无需撰写onfocus="if (this.value == 'Full Name') {this.value=''}" onblur="if(this.value == '') { this.value='Full Name'}" value="Full Name"

这可以通过html属性placeholder='Full Name'

来实现

在codeigniter视图文件中进行html5表单验证

2 个答案: