Question

html structure:

<form method="post" id="comment-form" accept-charset="UTF-8">
<div class="form-item form-type-textfield form-item-name">
 <input type="text" id="edit-name" name="name" value="" size="30" maxlength="60" class="form-text required" />
</div>
<div class="form-item form-type-textfield form-item-mail">

 <input type="text" id="edit-mail" name="mail" value="" size="30" maxlength="64" class="form-text required" />

</div>

<div class="form-item  form-item-homepage">

 <input type="text" id="edit-homepage" name="homepage" value="" size="30" maxlength="255" class="form-text" />
</div>
<div  id="edit-comment-body">

<label for="edit-comment-body-und-0-value">comment <span title="required" class="form-required">*</span></label>

<textarea class="text-full form-textarea required" id="edit-comment-body-und-0-value" name="comment_body[und][0][value]" cols="60" rows="5"></textarea></div>
</div>

jquery code:

$(document).ready(function(){

if($("#comment-form #edit-name").val()=='' || $("#comments #edit-email").val() =='' ||$("edit-comment-body"))
$("#comments #edit-submit").click(function(){
   $('#comment-form #edit-name').append('<span style="color:red;">please type your name</p>');
   $('#comment-form #edit-mail').append('<span style="color:red;">please type your emali</p>');
  $('#comment-form #edit-comment-body label span').append('<span style="color:red;">pleae type the content</p>');
});

});

i want to add some red text after the input text. but the above code can’t work?what’s wrong with my jquery code? thank you

Answer 1

There are quite a few things wrong – you use of selectors first of all is bad. You should stick to single id’s where possible, e.g.:

$("#edit-submit")

Next problem is, you are wasting an IF statement – when the page first loads, you are checking if some inputs are blank – which they are likely to be, and still, even if they wern’t you don’t want someone to be able to empty and it pass as valid simply because the function which listens to the .click() wasn’t added.

After the page loaded and the fields are blank, then you add a .click() listener to a button. It will be easier to add the .click() function to the button then check the validation always.

So for example you could change your jQuery to somehting like this:

$("#edit-submit").click(function(e) {
    var name = $('#edit-name');
    var mail = $('#edit-mail');
    var comment = $('#edit-comment-body-und-0-value');
    var blank = false;
    if (name.val()=='') {
        name.after('<span style="color:red;">please type your name</span>');
        blank = true;
    }
    if (mail.val()=='') {
        mail.after('<span style="color:red;">please type your emali</span>');
        blank = true;
    }
    if (comment.val()=='') {
        comment.after('<span style="color:red;">pleae type the content</span>');
        blank = true;
    }
    if (blank) {
        e.preventDefault();   
    }
});

You will also need to add a submit button, but I will assume you missed that off a copy paste of you HTML:

<input type="submit" id="edit-submit" value="submit" />

To explain the jQuery a little:

• Firstly get the values of the field you want to check.
• Now store a variable to check if any one field was blank.
• Now check each value to see if its blank.
  • If it was, use `.after()` to add your message, you can’t append to an input, so place it after the input.
  • Also change the blank var for later in the code
• Finally check if the blank variable has been changed and stop the submit happening, otherwise the form will show the message(s) briefly as the browser submits the incorrect form.

To enhance your validation, you only want to error message once, and if the mistake has been corrected, but another still exists the corrected message should be removed (imagine multiple clicks on the submit).

To do this, add a class to your error message:

<span style="color:red;" class="error-message">please type your name</span>

And at the top of your function:

$('.error-message').remove();

So the final .click() function:

$("#edit-submit").click(function(e) {
    $('.error-message').remove();
    var name = $('#edit-name');
    var mail = $('#edit-mail');
    var comment = $('#edit-comment-body-und-0-value');
    var blank = false;
    if (name.val()=='') {
        name.after('<span style="color:red;" class="error-message">please type your name</span>');
        blank = true;
    }
    if (mail.val()=='') {
        mail.after('<span style="color:red;" class="error-message">please type your emali</span>');
        blank = true;
    }
    if (comment.val()=='') {
        comment.after('<span style="color:red;" class="error-message">pleae type the content</span>');
        blank = true;
    }
    if (blank) {
        e.preventDefault();   
    }
});

See it working here

---

I will try to explain the e.preventDefault() part.
To start, the IF statement….basically an IF statement says:

if (what ever is in here is TRUE) {
    Do what ever code is written here....
}

So at the top of the .click() function we declare a variable called blank and set it to FALSE. So if no where in the code that follows that, up untill we get to the IF statement changes that to TRUE the code would not run.
So in the code, each time we check if one of the inputs is blank, we add a message and change blank to TRUE, so now the code in that IF statement will run.

On to the code, the e.preventDefault() this is a way to stop the browser doing what it would normally do by default.
So when we declare a callback function, in this case the .click() event, we are asking the jquery to listen out for clicks on something, so when it gets one, the event is also available within the code.
So imagine, since the begining of the web if someone clicks on a hyperlink (<a href=".....) the browser knows it needs to follow that link, regardless of what the jquery is doing, similarly if you submit a form, the browser knows it should follow the link declared in the declaration of the form.
Now because we don’t want to submit the form IF there was a blank, we need to preventDefault() (prevent the browser doing its default action).

To do this, when we declare the .click(function(e) {, we have declared a new variable e which is available within the function, e is the event which has caused the .click() function to be triggered – a click on a hyperlink, a click on a submit, a click on a picture even.
We could change things to slighlty longer code to make it easier to follow, for example: e to event (infact anything you want):

.click(function(event) {
    var blanks_found = false; // No blanks found yet.
    ........
    blah
    blah
    blah
    ........
    if (blanks_found == true) {
        event.preventDefault();
    }
});