Comments & Form Validation

  • wordpressoring

    (@wordpressoring)


    15 years, 6 months ago

    Hi guys,

    This is a last resort as I have tried coding away for a hours tonight to no avail.

    I am trying to prevent default values assigned to my text fields such as,

    • name
    • e-mail
    • website

      • ..from being submitted when a user posts his or her comment.

      I am using a Javascript implementation to clear the default value out of the text field when the user clicks into it (onfocus).

      The Javascript I am using has all the neccessary functions to prevent default values from being submitted when the user posts the form having not filled out its required fields but I can not get it to work.

      I end up with the error message:

      Error: please fill the required fields (name, email)

      Is there a simple way to go about this, to have my comments form validate itself based upon the rule that,

      1) All required fields must be completed
      &
      2) Default values assigned to input fields can not be submitted

      ?

      This was my code (though I think I am way off track)

      JAVASCRIPT

      <script type="text/javascript"><!--
// specify the name of your form
var thisForm = "commentform";

// load field names and default values into list
var defaultVals = new Array();
defaultVals[0] = new Array("name", "(your name here)");
defaultVals[1] = new Array("email2", "(your email address here)");

// populate fields with default values on page load
function MPLoadDefaults() {
with (document.forms[thisForm]) {
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (elements[thisField].value == '')
elements[thisField].value = thisDefault;
}}}

// clear default value from field when selected
function MPClearField(field) {
var fieldName = field.name;
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (thisField == fieldName) {
if (field.value == thisDefault) field.value = '';
break;
}}}

// clear all defaults when form is submitted
function MPClearAll() {
with (document.forms[thisForm]) {
for (var n=0; n<defaultVals.length; n++) {
var thisField = defaultVals[n][0];
var thisDefault = defaultVals[n][1];
if (elements[thisField].value == thisDefault)
elements[thisField].value = '';
}}}

// load default values if body tag is unavailable
window.onload = MPLoadDefaults;

//-->
</script>

      HTML

      <form name="commentform" id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" onsubmit="MPClearAll()">
<?php if ( $user_ID ) : ?>
<p style="display: block; margin-top: 5px; font-size: 10px; font-weight: bold;">Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>">Logout &raquo;</a>

<br clear="all" />
<?php else : ?>
	<div class="commentbox">
		<div class="float1">

				<label for="author">
				    <input type="text" name="name" id="name" value="<?php echo $comment_author; ?>" tabindex="1" style="width: 160px; background: #dbf1f8 url" onfocus="MPClearField(this)">
				</label>

				<label for="email">
					<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" style="width: 160px; background: #dbf1f8 url" onfocus="MPClearField(this)">
				</label>

				<label for="url">
					<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" style="width: 160px; background: #dbf1f8 url" onfocus="MPClearField(this)">
				</label>

		</div>

		<div class="float1">

				<label><small>Message</small>
				<?php endif; ?>
					<textarea name="comment" id="comment" rows="6" tabindex="4" class="TextArea" style="width: 189px;" cols="7"></textarea>
				</label>

		</div>
	</div>

	<div class="submitbuttonholder">

		<div class="float">

			<p class="formsubmitbutton"><input name="SubmitComment" type="image" class="SubmitComment" onmouseover="javascript:changeSty('SubmitCommentIE');" onmouseout="javascript:changeSty('SubmitComment');"  title="Post Your Comment" src="<?php bloginfo('template_url'); ?>/images/ButtonTransparent.png" alt="Post Your Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />

		</div>

		<div class="float">

		<?php do_action('comment_form', $post->ID); ?>

		</div>

	</div>
</form>

      And could someone kindly tell me what,

      <?php echo $comment_author_email; ?>

      ..actually does and how it works?

      Kind regards.

Viewing 1 replies (of 1 total)
  • Phil

    (@philsbury)

    14 years, 8 months ago

    As no one seems to have had a crack at this, here goes!

    First, download jQuery and jQuery.validate and include them in your theme

    To populate your fields use this html markup (or something similar):

    <label for="author">Author</label><input type="text" value="Your default text" id="author" name="author" />

    and so on – you’ll note I’ve set a value, that’s what we’ll use for the next bit:

    $(document).ready(function(){
$.fn.search = function() {
			return this.focus(function() {
				if( this.value == this.defaultValue ) {
					this.value = "";
				}
			}).blur(function() {
				if( !this.value.length ) {
					this.value = this.defaultValue;
				}
			});
		};

	$("#author").search();
});

    The above creates a function with jQuery to add/remove the default value on focus/blur.

    You can then validate with the validation plugin, but you’ll need to add a couple of new methods to stop your default values being seen as valid entries. You do this like so:

    $.validator.addMethod("author", function(value) {
		return value != "Your default text";
	}, 'Please enter your name');

    When assigned to the input field, that will stop “Your default text” being returned as a ‘true’ value.

    Hope this helps someone! 🙂

Viewing 1 replies (of 1 total)
  • The topic ‘Comments & Form Validation’ is closed to new replies.