CODEWITHSUNDEEP
javascriptmysqlhtml
PHP
PHP

Reputation: 443

How to Stop Submitting Empty Fields in Input

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>

Upvotes: 0

Views: 635

Answers (5)

karns
karns

Reputation: 5867

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!

Upvotes: 0

deefour
deefour

Reputation: 35360

  1. 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.

  2. 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;
        }
    });
});

    ​

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23064

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');
   }
})

Upvotes: 0

Rorrik
Rorrik

Reputation: 370

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" />

Upvotes: 0

peacemaker
peacemaker

Reputation: 2591

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

Upvotes: 2

Related Questions