if the field empty JQUERY

Question

I wrote a simple page with HTML and PHP. So, before PHP I would like to check empty fields with Jquery, but I do not learn the Jquery yet, so I would appreciated if someone helped me.

<?php
if(isset($_POST[add]))
{
if(empty($_POST[name]) || empty($_POST[surname])) {echo 'All form fields are required';}
}
?>
<form action="" method=post>
<table border=0  cellspacing=10 cellpadding=5>
        <tr>
            <td>Name:</td>
            <td><input type="text" name="name" size="10" value=""></td>
        </tr>
        <tr>
            <td>Surname:</td>
            <td><input type="text" name="surname" size="10" value=""></td>
        </tr>
        <tr>
            <td colspan=2><input type="submit" name="add" value="Add"></td>
        </tr>
</table>
</form>

You have a typo - the closing of your **surname** input field is missing.. — James Cazzetta, Apr 09 '13 at 07:23

chandresh_cool · Answer 1 · 2013-04-09T07:39:48.560

1

Add a javascript function on submit let say validate() and add this jquery code in that

function validate() {
    var name = $("#name").val();
    if (name == "") {
        alert('Name is required');
        return false;
    }
}

edited Apr 09 '13 at 07:39

answered Apr 09 '13 at 07:23

chandresh_cool

11,753
3
30
45

I dont want use alert, I mean it would be good appear the text under table – Rashad Apr 09 '13 at 07:41
1

Then add a span tag to the column and give an id to it let say nameerror. Then instead of alert('Name is required'); give $("#nameerror").html('Name is required'); – chandresh_cool Apr 09 '13 at 07:44

Jayendra Kainthola · Accepted Answer · 2013-04-09T08:14:49.427

You can add validation by adding jquery.

 $('input[name="add"]').click(function() { 

          if($('input[name="name"]').val() == '' || $('input[name="surname"]').val() == '') {
             $('.error').html('');

              if($('input[name="name"]').val() == '') {           
               $('.error').append('<p>Please enter your name</p>');                
              }

              if ($('input[name="surname"]').val() == '') {
                  $('.error').append('<p>Please enter your surname</p>');
              }

              $('.error').show();

              return false;

          }

          return true;

      })

html code

    <div class="error" style="display:none"></div>
<form action="" method=post>
<table border=0  cellspacing=10 cellpadding=5>
        <tr>
            <td>Name:</td>
            <td><input type="text" name="name" size="10" value=""></td>
        </tr>
        <tr>
            <td>Surname:</td>
            <td><input type="text" name="surname" size="10" value=""</td>
        </tr>
        <tr>
            <td colspan=2><input type="submit" name="add" value="Add"></td>
        </tr>
</table>
</form>

@RashadAghayev, I have edit code to remove alert message and display error message in html. — Jayendra Kainthola, Apr 09 '13 at 08:15

score 0 · Answer 3 · answered Apr 09 '13 at 07:26

0

<input class="field-name" type="text" name="name" size="10" value="">

i added a class to this input field so i can use a jquery selector

var name = $('.field-name').val();
if(name="") {
    console.log('name is empty');
    //your code here to do something when the field is empty
}

answered Apr 09 '13 at 07:26

Matthias Wegtun

1,231
1
9
13

You are correct I just read an article about null http://stackoverflow.com/questions/801032/why-is-null-an-object-and-whats-the-difference-compared-to-undefined and it doesnt need to check for null. Thanks for the comment VisioN + for you – Matthias Wegtun Apr 09 '13 at 07:30

score 0 · Answer 4 · answered Apr 09 '13 at 07:28

Following code can give you some idea. I would suggest to read tutorial on jquery at

http://www.w3schools.com/jquery/default.asp

   <html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
    $("#add").submit(function(){
        if ($('#name').length == ""){
            alert("ERROR in name!");
        }   
    }); 
}); 
</script>
<form action="" method=post>
<table border=0  cellspacing=10 cellpadding=5>
        <tr>
            <td>Name:</td>
            <td><input type="text" name="name" id="name" size="10" value=""></td>
        </tr>
        <tr>
            <td>Surname:</td>
            <td><input type="text" name="surname" id="surname" size="10" value=""</td>
        </tr>
        <tr>
            <td colspan=2><input type="submit" name="add"  id="add" value="Add"></td>
        </tr>
</table>
</form>
</html>

if the field empty JQUERY

4 Answers4