Wie werden Validierungsfehler im selben Dialog angezeigt?

Question

Ich verwende Codeigniter HMVC. Ich versuche ein Anmeldeformular zu erstellen, das beim Klicken auf die Anmeldeschaltfläche geöffnet wird. Validierungsfehler für das Anmeldeformular werden jedoch auf der übergeordneten Seite angezeigt, auf der sich das Anmeldeformular befindet. Das Dialogfeld wird auch nach dem Senden von Daten geschlossen. Ich möchte die Fehler im Anmeldeformular-Dialog anzeigen.

vw_login.php

<button id="show-sign-up-dialog">Sign Up</button>  
<dialog id="sign-up-dialog" >  
<button id="close"><i class="fa fa-times"></i></button> 

<?php echo form_open('user/sign_up', 'id = "reg_form" class="form-horizontal" role="form"'); ?> 
<!-- REGISTER USERNAME --> 
<div class="form-group"> 
<div class="col-12"> 
<label for="name"></label> 

<?php 
    $regi_username_attrib = array(
       'name' =>'register_username', 
       'class'=>'form-control mdl-input-login', 
       'rows' =>'4', 
       'placeholder'=>'Username' 
       ); 
    echo form_error('register_username'); 
    echo form_input($regi_username_attrib, set_value('register_username', '')); 
    ?> 

</div> 
</div> 
//Script to submit sign up form 
    <script> 
$(document).on("click", "#btn_sign_up", function() 
{ 
    $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url('user/sign_up');?>", 
      data: $(this).serialize(), 
      success: function(data) { 
      var obj = $.parseJSON(data); 
       if(obj!==null) 
       {        
        $('#error_msg').html(obj['error_message']);     
       } 
       }}); 

});  


</script> 
//Script to open sign up form 
<script> 
    var dialog_AddEntry = document.querySelector('#sign-up-dialog'); 
    var showDialogButton_AddEntry = document.querySelector('#show-sign-up-dialog'); 
    if (! dialog_AddEntry.showModal) { 
     dialogPolyfill.registerDialog(dialog_AddEntry); 
    } 
     showDialogButton_AddEntry.addEventListener('click', function() { 
     dialog_AddEntry.showModal(); 
}); 
     dialog_AddEntry.querySelector('#close').addEventListener('click', function() { 
     dialog_AddEntry.close(); 
}); 

</script> 

-Controller class User erweitert My_Controller {

public function index() 
{ 
    $this->load->view('vw_login');   
} 

public function login() 
{ 
    //|is_unique[tbl_user.user_username] 
    $this->load->library('form_validation'); 
    $this->form_validation->set_rules('username', 'Username', 'trim|required'); 
    $this->form_validation->set_rules('password', 'Password', 'trim|required'); 
    if ($this->form_validation->run() == FALSE) // If username and password is invalid 
    { 
     $this->load->view('vw_login'); 
    } 
    else 
    { 

    } 

} 
public function sign_up() 
{ 
    $this->load->library('form_validation'); 
    $this->form_validation->set_rules('register_username', 'Username', 'trim|required'); 
    if ($this->form_validation->run() == FALSE) // If username and password is invalid 
    { 
     $this->load->view('vw_login'); 
     $data = array('error_message' => form_error('register_username')); 
     echo json_encode($data); 
    } 
    else 
    { 

    } 

}    

}

Answer 1

Fügen Sie den folgenden

<span id="error_msg"></span> 

ein fter

<label for="name"></label>