Use jQuery to validate the name and comment fields in sNews

Use jQuery to validate the name and comment fields in sNews

Here's a simple little nugget of jQuery to validate the required fields of your comments forms on sNews. Honestly, jQuery isn't necessary for this basic form checking, but I already use it, so it's easy to add components.

This code just checks that the name field isn't empty, and that the comment textarea contains more than 10 characters, nothing special.

Obviously as this is client-side code, it does nothing if users disable javascript, it is only intended to assist them as the generic comment error page lists four (4) possible reasons why their comment may have failed to submit, this will let them know up front before submitting if the comment is too short or the name is missing.

Here is the vanilla code;

$('#post').submit(function() {
  var nameLen = $.trim($('#name').val()).length;
  if ($('#text').length > 0) { // comment page
    var commentLen = $('#text').val().length;
    var emailLen = '1';
  } else { //contact page
    var commentLen = $('#message').val().length;
    var emailLen = $('#email').val().length;
  }
  var errorMsg = '';
  if (nameLen == 0) {
    errorMsg = 'You need to add your name!\n';
  }
  if (emailLen == 0) {
    errorMsg = errorMsg + 'You need to add your email!\n';
  }
  if (commentLen <= 10) {
    errorMsg = errorMsg + 'Your comment is too short, write something!';
  }
  if (errorMsg) {
    alert(errorMsg);
    return false;
  }
});

Obviously you may want to change the language to your own and/or change the minimum length of comments allowed.

Here is the minified version; snews-form-validate.min.js
Simply upload that to the js directory on your server and add it into your index.php file.

<script type="text/javascript" src="/js/snews-form-validate.min.js"></script>

That's it, enjoy

Tags

 

You might like

Comments


Hi Nice article.

How can we make thise for Contact Form?

:D


Shouldn't be too difficult KaiTO, I will have a look at it within the next day or so, and post the results here.


Code has been updated to work with the contact form as well.

It will check for empty values for names and emails (very basic, no regex... and on contact page only, not for comments so it will work with my gravatar mod), as well as the message/comment text area.


thanks........


nice nice thanks...


Hi Matt:
OK... so how does this work? I'm testing in a default 1.7 install offline.
I have the minified script for snews-form-validate.min.js in the root/js folder, and linked to it in index.php. Jscript is working fine in my FF with other JQuery projects, but nothing appears to apply to the comment or contact form... no popups reminding the user to do anything with empty fields.

What might I be missing?


Hi keyrocks,

This was kind of designed to go with the email field for my gravatar mod. The default sNews install just has a URL field I think.

Try the javascript (bottom left-most box) from this jsfiddle I made.

http://jsfiddle.net/mdjus/uw3ZN/


Thanks Matt.
I'm using the JQuery 1.5 Library and its corresponding min file, either one, same non-response.

Tried replacing the js script with the jsfiddle script, the default comment form just returns the default "Your comment was not sent" along with the suggested problems with a back link. Tried replacing the <form></form> section within the default comment function with the plain HTML form from jsfiddle... nothing.

I have your email and gravatar mods in another 1.7 project, so tried it with that one... no response with either.

I don't need this mod... only suggested phpmyadmin check your site to see if you had it since he was looking for it, then he posted that he couldn't use it for 1.6, so I thought I'd give it a quick try. I'm puzzled. I'm also illiterate when it comes to jscript. Cheers :-)


Hmmm, I will see if I can install 1.6 sometime & have a go at it. Very strange though, the field IDs in the jsfiddle are from 1.6 I thought, and that's what the jquery script checks onsubmit.


I just found an sNews 1.6 install, viewed the source & copied the comment form into the fiddle and it works.

I've updated it.

http://jsfiddle.net/mdjus/uw3ZN/

Do you have a stock 1.6 install I could take a quick look at?


No, nothing online. I develop on localhost. A few questions:

1) Do we need jquery 1.71 available, or the script alone?
....... I've tested both ways, and with the script in the <head> rather than importing from outside index.php. No difference.

2) How would function comment know to over-ride the default message and use the script to show error messages as an overlay?
...... Just typing 1 character in the textarea and submitting the form just invokes the default sNews error message - "Your comment was not sent. Possible reasons:" which are generated in the function by the language values for $commentStatus and $commentReason. Following that, I'm redirected back to the page viewed before submitting.

3) Are any changes required to function comment?


You need jquery to be loaded before my script.

This doesn't affect the sNews comment function, as it's javascript it all runs client-side. Basically it just checks the fields & if there's an error it shows the alert & prevents the form from being submitted.

Nope, no changes needed to any code inside sNews.

I'm puzzled now, I will definitely have to install a copy of sNews 1.6 & investigate.


since this is activated and processed on the client side, how can you guarantee its validation when its actually posted to the server?


Hi Jacob,

You can't, it's not a replacement for server-side validation/sanitation. It's simply an aid for users with javascript enabled.

Comments are closed. No new comments allowed.

Copyleft 2002 - 2017 Matt Jones
Hand crafted with HTML5 & CSS3
↑ Back to top