How to Stop Submitting Empty Fields in Input

Question

I am using a subscribe news letter script by using MySQL and PHP. When the user enters the e-mail and clicks the button the e-mail is added to database.

The issue is that while clicking the button without entering an e-mail, the data base is updating with an empty record. How can I stop submitting the empty fields and force the user to enter an e-mail?

Here is my HTML:

<form id="myForm" action="update.php" method="post">
    <input type="hidden" name="action" value="update" />
    <input type="text" name="email" id="email" value="Enter your email here" onfocus="if (this.value == 'Enter your email here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email here';}" onwebkitspeechchange="this.value = this.value.replace('Enter your email here','')"; style=" color:#999; font-size:1em;width:200px; font-style:italic; font-family:"Times  New Roman", Times, serif;"/>
    <input class="button" type="image" src="rss.png" />
 </form>

Um, check for an empty field in your PHP script?

j08691
– j08691

2012-07-12 19:58:05 +00:00
Commented Jul 12, 2012 at 19:58 — j08691
– j08691, Commented Jul 12, 2012 at 19:58

peacemaker · Accepted Answer · 2012-07-12 20:00:50Z

2

Sounds to me like you need to do some form validation before you take the user input and insert it into your database. It's dangerous to do as you're doing.

Why not use one of the many plugins out there:

http://www.queness.com/post/10104/powerful-javascript-form-validation-plugins

answered Jul 12, 2012 at 20:00

peacemaker

2,5914 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Hampton Over a year ago

The form data still has to be validated on the server side, to catch people who have JavaScript disabled or potentially malicious attackers.

octern Over a year ago

@MichaelHampton Good point, though javascript validation is much better from a user experience perspective. It's probably reasonable to use both.

Simon Catlin Over a year ago

Yep, use both. JS to add the alert() stlyee "don't be a doofus" and PHP to protect your back-end. Also, check the e-mail address is in a valid format, to stop SQL injection attacks.

peacemaker Over a year ago

/agree. You need to validate both client and server-side :)

Rorrik · Accepted Answer · 2012-07-12 20:05:44Z

0

This is a useful tutorial on using the jquery validation plugin: http://docs.jquery.com/Plugins/Validation

Ignore the styling in their example and focus on the core aspects. In your case, the most useful line is:

<input id="cemail" name="email" size="25"  class="required email" />

answered Jul 12, 2012 at 20:05

Rorrik

3721 gold badge3 silver badges15 bronze badges

Comments

Robin Maben · Accepted Answer · 2012-07-12 20:05:54Z

0

Roughly, you would need to do something like..

var form = $('#mtForm');

$('input').change(function(){
   if($((this).val() == ''){
       form.unbind('submit').submit(function(){
           return false;
       });
   }
   else{
       form.unbind('submit');
   }
})

answered Jul 12, 2012 at 20:05

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Comments

deefour · Accepted Answer · 2012-07-12 20:05:57Z

0

You should change the value attribute of your email field to a placeholder attribute. The onfocus, onwebkitspeechchange and onblur code can be removed from the email input tag.

You can use something like this to check for a blank field if that's the only type of validation you're after (below is written with jQuery).

$(function(){
    $('#myForm').submit(function(e){
        if ($('#email').val().trim() == "") {
          // some sort of notification here
          e.preventDefault();
          return false;
        }
    });
});

answered Jul 12, 2012 at 20:05

deefour

35.4k7 gold badges99 silver badges91 bronze badges

Comments

karns · Accepted Answer · 2014-09-08 15:07:23Z

Ideally, you would validate the form on the client side (javascript/JQuery) as well as the server side (php).

For clarity I will remove the inline code on your input box to get this:

<input type="text" name="email" id="email" value="Enter your email here" />

Note - You may use

placeholder='Enter your email here'

to get the prompt in your input box.

Client side validation using HTML5

Make a required field with email format validation:

<input type="email" name="email" id="email" value="Enter your email here" required="required"/>

Client side validation using javascript/JQuery - example.js

JQuery:

$('#email').bind('blur', function() {
    if (!validateEmail($(this).val()) {
        // Add errors to form or other logic such as disable submit
    }
});
function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    return emailReg.test($email);
}

}

Server side validation - update.php

// Require the email
if (empty($_POST['email'])) {
    $error_message = 'You must enter an email!';
} else if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $error_message = 'Invalid email format. Example: [email protected]';
} else { // If no errors, continue processing the form
    // process the form, enter email
}

The HTML5 alone will prevent submission of the form, however only more recent browsers support HTML5.

Hope this is helpful!

Collectives™ on Stack Overflow

How to Stop Submitting Empty Fields in Input

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related