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?

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.

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

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.

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.