sans

sans

How do i get an alert message or error message on entering invalid input in current text box immediately before going to fill the next text box . That is while i am editing a row in the table or filling new entry , what validation must i use such that it shows error message as soon as i start typing invalid input and doesnt wait till i click on update.
This is the code :

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../../php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;
    
// Allow a number of different formats to be submitted for the various demos
$format = isset( $_GET['format'] ) ?
    $_GET['format'] :
    '';

if ( $format === 'custom' ) {
    $update = 'n/j/Y';
    $registered = 'l j F Y';
}
else {
    $update = Format::DATE_ISO_8601;
    $registered = Format::DATE_ISO_8601;
}
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'employee', 'emp_id' )
    ->fields(
        Field::inst( 'emp_fname' )->validator( 'Validate::required' )
                                  
                                  ->validator(  function ( $val, $data, $opts ) {
                                                            return ctype_alpha($val) ?
                                                             true:
                                                             'Please enter valid Name';
                                                        } ),//string
        Field::inst( 'emp_lname' )->validator( 'Validate::notEmpty' )
                                  ->validator(  function ( $val, $data, $opts ) {
                                                            return ctype_alpha($val) ?
                                                             true:
                                                             'Please enter valid Name';
                                                        } ),//string
        Field::inst( 'emp_email_id' )->validator( 'Validate::email', array('required' => false) ),
        Field::inst( 'emp_contact_no1' )->validator( 'Validate::numeric' )
                                         ->validator( function ( $val, $data, $opts ) {
                                                            return strlen( $val ) != 10 ?
                                                            'Please enter valid Phone Number' :
                                                             true;
                                                        } )     
                                        ->validator( 'Validate::notEmpty' ),                
        Field::inst( 'emp_contact_no2' )->validator( 'Validate::numeric')
                                        ->validator( function ( $val, $data, $opts ) {
                                                            return ((strlen( $val ) != 0) and (strlen( $val ) != 10)) ?
                                                            'Please enter valid Phone Number' :
                                                             true;
                                                        } ),
                                                        
                                        
        Field::inst( 'emp_desig' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'joining_date' )->validator( 'Validate::dateFormat', array(
                'empty' => false,
                'format' => $update
            ) )
            ->getFormatter( 'Format::date_sql_to_format', $update )
            ->setFormatter( 'Format::date_format_to_sql', $update ),
        //validator( 'Validate::dateFormat', array( "format" => Format::DATE_ISO_8601 ))
        Field::inst( 'leave_date' )->validator( 'Validate::dateFormat', array(
                
                'empty' => true,
                'format' => $update
            ) )
            ->getFormatter( 'Format::date_sql_to_format', $update )
            ->setFormatter( 'Format::date_format_to_sql', $update )

    )
    ->process( $_POST )
    ->json();

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide. The issue here was leading whitespace.

sans

sorry new to discussions so i don't know why the code has come half inside code area and half outside it

allan

What you are looking for is not something that is built into Editor since it focuses on server-side validation. The data must be validated at the server, so rather than duplicating logic, that is where Editor focuses its attention.

Having said that you could use field().input() to get the input elements and assign whatever event listeners you wish in order to perform your validation.

Allan

sans

can you show me exactly where i must do it please wrt my question of validating the fields then n there rather than getting msgs after clicking on the update button

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">-->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>Editor example - Multiple fields in a bubble</title>
    <link rel="stylesheet" type="text/css" href="../../css_dt/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../css_dt/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../css_dt/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../resources/demo.css">
    <style type="text/css" class="init">
    
    </style>
    <script type="text/javascript" language="javascript" src="../../js_dt/jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js_dt/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js_dt/dataTables.buttons.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js_dt/dataTables.select.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/editor-demo.js">
    </script>
    <script type="text/javascript" language="javascript" class="init">
    


var editor; // use a global for the submit and return data rendering in the examples
var p1="*";
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff_emp.php",
        
        table: "#example",
        fields: [ {
                label: "First name:"+p1.fontcolor("red"),
                name: "emp_fname",
                .input:
            }, {
                label: "Last name:"+p1.fontcolor("red"),
                name: "emp_lname"
            }, {
                label: "Email ID:",
                name: "emp_email_id"
            }, {
                label: "Contact No 1:"+p1.fontcolor("red"),
                name: "emp_contact_no1"
            }, {
                label: "Contact No 2:",
                name: "emp_contact_no2"
            }, {
                label: "Designation:"+p1.fontcolor("red"),
                name: "emp_desig"
            }, {
                label: "Joining Date:"+p1.fontcolor("red"),
                name: "joining_date",
                type:  'datetime',
                def:   function () { return new Date(); }
            },{
                label: "Leaving Date:",
                name: "leave_date",
                type:  'datetime',
                def:   function () { return new Date(); }
            }

        ]
    } );

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.bubble( this );
    } );

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff_emp.php",
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            {
                data: null,
                render: function ( data, type, row ) {
                    // Combine the first and last names into a single table field
                    return data.emp_fname+' '+data.emp_lname;
                },
                editField: ['emp_fname', 'emp_lname']
            },
            { data: "emp_email_id" },
            { data: "emp_contact_no1" },
            { data: "emp_contact_no2" },
            { data: "emp_desig" },
            { data: "joining_date" },
            { data: "leave_date" },
        ],
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );



    </script>
</head>
<body class="dt-example">
    <div class="container">
        <section>
            <h1>Editor example <span>Multiple fields in a bubble</span></h1>
            
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Email ID</th>
                        <th>Contact No 1</th>
                        <th>Contact No 2</th>
                        <th>Designation</th>
                        <th>Joining Date</th>
                        <th>Leaving Date</th>
                    </tr>
                </thead>
            </table>
            
            
        </section>
    </div>
    <section>
        <div class="footer">
            
            
                
                
        </div>
    </section>
</body>
</html>

allan

In the above code you could insert the following around line 77:

editor.field('emp_fname').input().on( 'change', function () {
  if ( editor.field('emp_fname').val() === '' ) {
    editor.field('emp_fname').error('Cannot be empty');
  }
  else {
    editor.field('emp_fname').error('');
  }
} );

Obviously you'll need to write whatever validation logic you actually want, but that is a basic proof of concept.

Allan

sans

thank you now its working