CODEWITHSUNDEEP
jqueryjquery-validate
md1hunox
md1hunox

Reputation: 3965

custom html inside errorElement of jquery Validate

I'm putting my error message inside a div (errorElement) and giving it errorClass:"callout border-callout error, which I require to custom style it. This is how it looks now:

<input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/>
<div id="email-id" class="callout border-callout error"><!-- this is my error div -->
    Here is my error message
</div>

but I want two more elements inside this errorElement so i can style it properly. Ideally, it should look as follows:

<input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/>
<div id="email-id" class="callout border-callout error"><!-- this is my error div -->
    Here is my error message
    <b class="border-notch notch"></b>
    <b class="notch"></b>
</div>

My current jquery validate code:

$(function() {
    $('#form1').validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            fname: {
                required: true,
            },
            lname: {
                required: true,
            }

        },
        messages: {
            email: {
                required: 'Please enter your email',
                email: 'Please enter a valid email'
            },
            fname: {
                required: 'Please enter your First Name',
            },
            lname: {
                required: 'Please enter your Last Name',
            }
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                dataType: 'json',
                success: function(jsonResponse) {
                                //Example json object returned by server: [false, "You have already subscribed!"]
                                var notyType;
                                if (jsonResponse.response) {
                                    notyType = 'success';
                                } else {
                                    notyType = 'error';
                                }
                                showNoty(jsonResponse.message, notyType);
                            }
                        });
        },
        errorClass: "error callout border-callout",


    });


});

UPDATE:

<form method="post" id='form1' class="subscription-form">
   <div class="subscription-form-email">
       <span class="input-row"><input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/></span>
       <div id="email-id" class="callout border-callout error" style="display:none"> 
            <b class="border-notch notch"></b>
            <b class="notch"></b>
       </div>
       <span class="input-row"><input type="text" id="fname" name="fname" placeholder="First Name"/></span>
       <span class="input-row"><input type="text" id="lname" name="lname" placeholder="Last Name"/></span>
   </div>

   <input type="submit" value="SUBSCRIBE" class="submit-button" name="submit" id="submitButton" title="Click here to submit your message!" />

</form>

Upvotes: 3

Views: 5356

Answers (1)

Sparky
Sparky

Reputation: 98748

There are a couple issues with your code that need to be corrected...

1) Fix the HTML. You have mismatched div tags... specifically, you have one more </div> than you have <div>. I don't see any other HTML issues, but your layout looks like an unusual mix of div elements with input elements nested inside span elements. If you want those span elements to behave like rows, then IMHO, they should be div elements instead.

2) The error class, border-callout, is a real problem. Although it may be technically ok to have class names that contain hyphens, it's bad practice. Why? Because JavaScript will interpret that hyphen as a minus sign. Your unedited code in a jsFiddle shows that the error messages will stack up on each other instead of toggling. Simply removing border-callout from errorClass, clears that issue right up.

As far as what you're asking... how to insert the error message into a predefined div full of other HTML.

First, you're going to have to put the message into some kind of container of its own... label, p, span, etc. It's how the plugin needs it so it can be targeted. Unless you specify it with the errorElement option, the plugin will just use label by default.

<div id="email-id" class="callout border-callout error"><!-- this is my error div -->
    <label>Here is my error message</label><!-- message must be inside a container -->
    <b class="border-notch notch"></b>
    <b class="notch"></b>
</div>

Then place the message label object inside your <div> using the errorPlacement callback function and a bunch of jQuery DOM traversal methods...

errorPlacement: function(error, element) {
    error.insertBefore(element.parent().next('div').children().first());
}

Breakdown:

 error         // the error object (includes message and its label container)
.insertBefore( // insert the error object before what's defined inside ()
   element     // your input element object
  .parent()    // the span which encloses your input element
  .next('div') // the div which immediately follows your span
  .children()  // everything inside your div
  .first()     // the first element inside your div
)              // closes insertBefore()

Then since you also need to toggle the <div> container along with the error message, you'll need to use the highlight and unhighlight callback functions and a couple jQuery DOM traversal methods...

highlight: function (element) {
    $(element).parent().next('div').show();
},
unhighlight: function (element) {
    $(element).parent().next('div').hide();
}

Working DEMO: http://jsfiddle.net/naa6w/

Upvotes: 3

Related Questions