Подтвердить перед отправкой данных и не отправлять пустые поля

Question

Мой скрипт отлично работает, но также отправляет пустые данные, как я решаю это?

Javascript - вместе с Ajax вызова

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 Template

<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's 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>