如何使用ajax在codeigniter中的验证错误上使字段变为红色

时间：2017-07-14 10:00:35

标签： javascript php jquery ajax codeigniter

我希望在带有ajax和jquery的代码点火器中使输出字段变为红色，但即使只有一个字段有错误，它也会使所有输入字段变为红色。我想让那个特殊的输入字段变成红色，里面有错误。 这是我的表单代码：

 
    <?php echo form_open(); ?>

    <div class="form-group">
          <input name="email" type="text" id="email" class="form-control" placeholder="Email" />
      
    </div>
    <div class="form-group">
      <?php echo form_password(array(
          'name'=>'password', 
          'id'=> 'password', 
          'placeholder'=>'Password', 
          'class'=>'form-control', 
          'value'=> set_value('password'))); ?>
    </div>
    <div id="message" style="color:red;"></div>
        <div class="checkbox pull-left">
                                             <label>
                                             <input type="checkbox"> Remember Me
                                             </label>
                                        </div>
     <button name="submit" id="formsubmitbutton" type="submit" class="btn btn-lg btn-primary btn-block">Signin</button>

    <?php echo form_close(); ?>

<div class="modal-footer">
<div class="col-md-12">
<p style="color:#aeaeae; text-align:center;"><a href="<?php echo site_url();?>main/forgot">Help, </a> I forgot my login details.</p>
</div>                                      
</div>
</div>              


                          <div class="tab-pane fade" id="signup">

   
              <h3 class="text-center"><i class="fa fa-lock"></i> Create User Account</h3>






   <?php echo form_open();?>

                <div class="form-group">
                    <input class="form-control" id="fname" name="fname" placeholder="Your First Name" type="text" value="<?php echo set_value('fname'); ?>" />
                    <span class="text-danger"><?php echo form_error('fname'); ?></span>
                </div>

                <div class="form-group">
                    <input class="form-control" id="lname" name="lname" placeholder="Last Name" type="text" value="<?php echo set_value('lname'); ?>" />
                    <span class="text-danger"><?php echo form_error('lname'); ?></span>
                </div>
                
                <div class="form-group">
                    <input class="form-control" id="emaill" name="emaill" placeholder="Email-ID" type="email" value="<?php echo set_value('emaill'); ?>" />
                    <span class="text-danger"><?php echo form_error('emaill'); ?></span>
                </div>
 <center><div class="form-group" style="width:100%;">
                  <select name="location" id="location" class="form-control">


 <option >Location</option>
    <option>Australia</option>
    <option >Spain</option>
    <option>UK</option>
  </select>
</div></center>
          

                                            <center><div class="form-group" style="width:100%;">

  <select class="form-control" name="gender" id="gender" >
  
    <option>Select one option:</option>
    <option>Male</option>
    <option>Female</option>
  </select>
</div></center>
                                    


          <center> <div class="form-group row-fluid" style="width:100%;">
                  
                    <div class="col-xs-3">
                        <input type="text" name="phonee" class="form-control" id="ph" onkeypress="return isPhoneKey(event)" placeholder="+">
                    </div>
                   
                    <div class="col-xs-9">
                        <input type="text"name="mobile" id="mobile"  onkeypress="return isNumberKey(event)"  class="form-control" >
                    </div>
                    </div></center>
                <div class="form-group">
                    <input class="form-control" id="passwordd" name="passwordd" placeholder="Password" type="password" />
                    <span class="text-danger"><?php echo form_error('passwordd'); ?></span>
                </div>

                <div class="form-group">
                    <input class="form-control" id="cpassword" name="cpassword" placeholder="Confirm Password" type="password" />
                    <span class="text-danger"><?php echo form_error('cpassword'); ?></span>
                </div>

                <div class="form-group">
                <input class="btn btn-default" id="submit" name="submit" type="button" value="Sign Up" style="width:90% ;height:42px; font-weight: normal; text-align:center;  color:#fff; background-color:#286090; border-color:#204d74; border-radius:5px;" />

                </div>
				</br>
				                <div id="alert-msg"></div>

                <?php echo form_close(); ?>

这是我的ajax jquery，它使场变红：

    <script type="text/javascript">
jQuery('#submit').click(function() {
    var form_data = {
        fname: jQuery('#fname').val(),
        lname: jQuery('#lname').val(),
        email: jQuery('#emaill').val(),
        pass: jQuery('#passwordd').val(),
        repass: jQuery('#cpassword').val(),
        location: jQuery('#location').val(),
        mobile: jQuery('#mobile').val(),
        gender: jQuery('#gender').val()
    };
    jQuery.ajax({
        url: "<?php echo site_url('modal_contact/submit'); ?>",
        type: 'POST',
        data: form_data,
        success: function(msg) {
            if (msg == 'YES')
                jQuery('#alert-msg').html('<div class="alert alert-success text-center">Your mail has been sent successfully!</div>');
            else if (msg == 'NO')
                jQuery('#alert-msg').html('<div class="alert alert-danger text-center">Error in sending your message! Please try again later.</div>');
            else
                jQuery('#alert-msg').html('<div class="alert alert-danger">' + msg + '</div>');
			    console.log('msg');
                jQuery('#fname').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
                jQuery('#lname').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
                jQuery('#emaill').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
                jQuery('#location').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
                jQuery('#gender').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
                jQuery('#mobile').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
                jQuery('#ph').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
                jQuery('#passwordd').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
                jQuery('#cpassword').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
        }
    });
    return false;
});
</script>

这是我的控制器，它检查验证并回显validation_errors（）;

modal_contact控制器：

<?php
class modal_contact extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form','url'));
        $this->load->library(array('form_validation', 'email'));
		        $this->load->database();

		        $this->load->model('user_model');

    }

    function index()
    {
        $this->load->view('public/index.php');
    }

    function submit()
    {

        //set validation rules
$this->form_validation->set_rules('fname', 'First Name', 'trim|required|xss_clean|callback_alpha_space_only');
$this->form_validation->set_rules('lname', 'Last Name', 'trim|required|xss_clean|callback_alpha_space_only');
        $this->form_validation->set_rules('email', 'Email ID', 'trim|required|valid_email|is_unique[user.email]');

$this->form_validation->set_rules('pass', 'Password', 'trim|required');
$this->form_validation->set_rules('repass', 'Re Password', 'trim|required|matches[pass]');
		
        //run validation check
        if ($this->form_validation->run() == FALSE)
        {   //validation fails
            echo validation_errors();
        }
        else
        {
			            //insert the user registration details into database
     
	$data = array(
                'fname' => $this->input->post('fname'),
                'lname' => $this->input->post('lname'),
                'email' => $this->input->post('email'),
                'password' => $this->input->post('pass'),
                'location' => $this->input->post('location'),
                'mobile' => $this->input->post('mobile'),
                'gender' => $this->input->post('gender')
            );
			
                        // insert form data into database
            if ($this->user_model->insertUser($data))
            {
                // send email
                if ($this->user_model->sendEmail($this->input->post('email')) )
                {
                    echo "Your Mail has been sent successfully! Verify your account.";
                }
                else
                {
                    echo "Error in sending your message! Please try again later.";
                }
            }
            else
            {
               echo "Error";
            }
        }
    }
    


function verify($hash=NULL)
    {
        if ($this->user_model->verifyEmailID($hash))
        {
            $this->session->set_flashdata('verify_msg','<div class="alert alert-success text-center">Your Email Address is successfully verified! Please login to access your account!</div>');
            redirect('modal_contact/index');
        }
        else
        {
            $this->session->set_flashdata('verify_msg','<div class="alert alert-danger text-center">Sorry! There is error verifying your Email Address!</div>');
            redirect('modal_contact/index');
        }
    }
	
    
    //custom validation function to accept alphabets and space
    function alpha_space_only($str)
    {
        if (!preg_match("/^[a-zA-Z ]+$/",$str))
        {
            $this->form_validation->set_message('alpha_space_only', 'The %s field must contain only alphabets and space');
            return FALSE;
        }
        else
        {
            return TRUE;
        }
    }
}

?>

提前致谢!!

1 个答案:

答案 0 :(得分：0)

首先从ajax和提交功能更改与post key相同的所有输入字段ID 对于前

pass: jQuery('#passwordd').val(),

到

//in ajax
passwordd: jQuery('#passwordd').val(),//must be same
//in submit()
$this->form_validation->set_rules('pass', 'Password', 'trim|required');

将设置页面标题类型json

放在submit（）的顶部 
$this->output->set_content_type('application/json');

并替换以下所有代码

形式

//run validation check
if ($this->form_validation->run() == FALSE)
{   //validation fails
    echo validation_errors();
}

到

//run validation check
if ($this->form_validation->run() == FALSE)
{   //validation fails
    $errors=$this->form_validation->error_array();
  $this->output->set_output(json_encode(array('errors' => $errors)));
}

和

// insert form data into database
if ($this->user_model->insertUser($data))
{
    ........
    .......
}else{
     echo "Error";
}

到

// insert form data into database
if ($this->user_model->insertUser($data))
{
    // send email
    if ($this->user_model->sendEmail($this->input->post('email')) ){
        $this->output->set_output(json_encode(
            array(
                'sendmail' => true, 
                'msg'=>"Your Mail has been sent successfully! Verify your account."
            )
        ));
    }else{
      $this->output->set_output(json_encode(
            array(
                'sendmail' => false, 
                'msg'=>"Error in sending your message! Please try again later."
            )
        ));
    }
}else{
    $this->output->set_output(json_encode(array('msg'=>"Error")));
}

并将ajax的所有成功回调函数更改为

success: function(data) {
    console.log(data);
  if (data.sendmail){
    jQuery('#alert-msg').html('<div class="alert alert-success text-center">'+data.msg+'</div>');
  }else{
    jQuery('#alert-msg').html('<div class="alert alert-danger text-center">'+data.msg+'</div>');
  }
  if(data.errors){
    jQuery.each(data.errors,function(key,value){
        jQuery('#'+key).attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
    });
  }
}

注意： - 如果有任何错误，请在评论中提问

相关问题
最新问题