Question

我的脚本工作正常，但在我解决时也会发送空白数据？

Javascript - 以及ajax Call

function getUsers(){
    $.ajax({
        type: 'POST',
        url: 'userAction.php',
        data: 'action_type=view&'+$("#userForm").serialize(),
        success:function(html){
            $('#userData').html(html);
        }
    });
}
function userAction(type,id){
    id = (typeof id == "undefined")?'':id;
    var statusArr = {add:"added",edit:"updated",delete:"deleted"};
    var userData = '';
    if (type == 'add') {
        userData = $("#addForm").find('.form').serialize()+'&action_type='+type+'&id='+id;
    }

    else if (type == 'edit'){
        userData = $("#editForm").find('.form').serialize()+'&action_type='+type;
    }
    else{
        userData = 'action_type='+type+'&id='+id;
    }
    $.ajax({
        type: 'POST',
        url: 'userAction.php',
        data: userData,
        success:function(msg){
            getUsers();
            $('.form')[0].reset();
            $('.formData').slideUp();
        }
    });
}
function editUser(id){
    $.ajax({
        type: 'POST',
        dataType:'JSON',
        url: 'userAction.php',
        data: 'action_type=data&id='+id,
        success:function(data){
            $('#idEdit').val(data.id);
            $('#nameEdit').val(data.name);
            $('#emailEdit').val(data.email);
            $('#phoneEdit').val(data.phone);
            $('#editForm').slideDown();
        }
    });
}

userAction.php

include 'DB.php';
$db = new DB();
$tblName = 'users';
if(isset($_POST['action_type']) && !empty($_POST['action_type'])){
    if($_POST['action_type'] == 'data'){
        $conditions['where'] = array('id'=>$_POST['id']);
        $conditions['return_type'] = 'single';
        $user = $db->getRows($tblName,$conditions);
        echo json_encode($user);
    }
    else if($_POST['action_type'] == 'view'){
    $users = $db->getRows($tblName,array('order_by'=>'id DESC'));
    if(!empty($users)){
        $count = 0;
        foreach($users as $user): $count++;
        echo '<tr>';
        echo '<td>#'.$count.'</td>';
        echo '<td>'.$user['name'].'</td>';
        echo '<td>'.$user['email'].'</td>';
        echo '<td>'.$user['phone'].'</td>';
        echo '<td><a href="javascript:void(0);" class="glyphicon glyphicon-edit" onclick="editUser(\''.$user['id'].'\')"></a><a href="javascript:void(0);" class="glyphicon glyphicon-trash" onclick="return confirm(\'Are you sure to delete data?\')?userAction(\'delete\',\''.$user['id'].'\'):false;"></a></td>';
        echo '</tr>';
        endforeach;
    }
    else{
        echo '<tr><td colspan="5">No user(s) found......</td></tr>';
    }
}
else if($_POST['action_type'] == 'add'){
    $userData = array(
        'name' => $_POST['name'],
        'email' => $_POST['email'],
        'phone' => $_POST['phone']
    );
    $insert = $db->insert($tblName,$userData);
    echo $insert?'ok':'err';
}
else if($_POST['action_type'] == 'edit'){
    if(!empty($_POST['id'])){
        $userData = array(
            'name' => $_POST['name'],
            'email' => $_POST['email'],
            'phone' => $_POST['phone']
        );
        $condition = array('id' => $_POST['id']);
        $update = $db->update($tblName,$userData,$condition);
        echo $update?'ok':'err';
    }
}
else if($_POST['action_type'] == 'delete'){
    if(!empty($_POST['id'])){
        $condition = array('id' => $_POST['id']);
        $delete = $db->delete($tblName, $condition);
        echo $delete?'ok':'err';
    }
}
exit;
}

HTML表单模板

<form class="form" id="userForm" data-toggle="validator" role="form">
    <div class="form-group has-feedback">
        <input type="text" class="form-control" name="name" id="name" placeholder="Full name" required>
    </div>

    <div class="form-group">
        <input type="email" class="form-control" name="email" id="email" placeholder="Email" required>
    </div>

    <div class="form-group">
        <input type=text class="form-control" name="phone" id="phone" placeholder="Telefono" maxlength="12" required>
    </div>

    <a href="javascript:void(0);" class="btn btn-warning" onclick="$('#addForm').slideUp();">Cancel</a>
    <a href="javascript:void(0);" class="btn btn-success" onclick="userAction('add')">Add User</a>

</form>

请勿使用按钮验证是否不是链接，而是将字段发送为空白。

Answer 1

在您希望不为空的每个输入上使用HTML 5＆＃39; required。

例如：

<input type="text" name="example" placeholder="example" required />

Answer 2

您可以将<a>代码更改为实际按钮吗？应该帮助HTML5需要验证。

<button type="submit" class="btn btn-success" onclick="userAction('add')">Add User</button>
<button type="button" class="btn btn-warning" onclick="$('#addForm').slideUp();">Cancel</button>

在发送数据之前验证，不发送空字段

2 个答案: