The jquery tools validation tool does not work correctly and produces an element hanging below the parent element

Question

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

First problem:

I'm having trouble validating the form of jquery tools. Verification does not work. When you click the Submit button, it just shows the input value that the verification message should be in. In addition, although the completed fields are filled out, it still will not allow me to submit the form.

If you follow this link, you can try and edit the data to see the validation errors.

The second problem:

If you follow this link, you will see that the avatar and the "Change information" button are hanging on a gray background. How can I get this gray background to fully encapsulate the avatar icon?

Answer 1

The problem is only in your script check.,

Please refer to the following location:

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

I made three changes to your encodings:

(one). I changed the Validator script

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

(2). To check the email we need to change the type in the email field, for example

 <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 to the script validator

 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 can help you solve your problems.

Answer 2

for problem # 2, you have a css problem with the header:

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

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

Answer 3

About the first problem, jQuery Tools validator gets confused, your version of jqt 1.2.6 considering upgrading to 1.2.7 and everything is installed.

Answer 4

try below for your problem # 1

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

I came across the same problem, for more details we will consider this issue.

UPDATE

This seems to be a problem with custom loading. When I tried the CDN version, it worked fine.

Link to CDN.