jquery tools validator not working correctly and issue with element hanging below parent element

Question

I have 2 problems at the moment. I bought a template and am trying to integrate it into a rails app.

First problem:

I'm having trouble with the jquery tools form validations. The validation is not working. When you click the submit button, it just shows the input's value where the validation message should be. Also, even though the required fields are filled in, it still won't let me submit the form.

If you go to this link - , you can try and edit the data to see the valiation errors.

Second problem:

If you go to this link - , you can see that the avatar and "Edit info" button are hanging through the gray background. How can i get that gray background to fully encapsulate the avatar icon?

Isomerous

What is the jquery tools form validations? do you have any link? – Diallage

you need to show your validation script. – Coombs

@Naor: jquerytools.org/documentation/validator/index.html – Wholehearted

@Catfish: Please separate out both the problem in different question, so it will be more useful in future to other developer. In your question 1st problem is related to jquery-tools validator while 2nd problem is html/css problem. – Wholehearted

Sorry, i was dinking with this thing that last and commented out the validation stuff. I just put it back in so try anytime again. – Isomerous

Answer 1

The problem is in your validation script only.,

Please refer the following location :

To see it in action http://jsbin.com/uwuqul/1/edit

I did three changes in your codings those are,

(1). I have changed the Validator Script

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>

(2). For Email validation, we need to change the type in email field,like

<input id="demo_email" name="demo_email" required="required" size="30" type="text" value="" novalidate/>

(to)

<input id="demo_email" name="demo_email" required="required" size="30" type="email" value="" novalidate/>

(3). Adding Style in validator script

jQuery(".edit_profile_form").validator({ 
      position: 'top', 
      offset: [25, 10],
      messageClass:'form-error',
      message: '<div style="width:270px;"><em/></div>' // em element is the arrow
    }).attr('novalidate', 'novalidate');

I think this may help you resolve your problems.

Schoenfeld

it will work with just updating version. Without further actions – Gadson

Thanks dude.,Have a nice time:-) – Schoenfeld

Answer 2

for problem #2 you have a css issue with header:

.main-content > header {
    height: 16px;
}

get rid of that height, and the container will grow to fit the elements inside it

Nares

This solved my first issue. Apparently in rails you can'd use ie conditional stylesheets like normal because all the stylesheets get compiled to one file so i used the IE hacks from this link - net.tutsplus.com/tutorials/html-css-techniques/… – Isomerous

Answer 3

About the first problem, the jQuery Tools validator is freaking out, your version of jqt is 1.2.6 consider upgrade it to 1.2.7 and all set.

Gadson

Answer 4

try below for your problem#1

set required="true" rather than required="required"

I've come across the same problem, for more details go through this question.

UPDATE

It seems like it's a problem with custom download. When I tried the CDN version it worked fine.

Link to the CDN.

Wholehearted

That doesn't seem to fix the issue. – Isomerous