7

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?

Catfish
  • 18,876
  • 54
  • 209
  • 353
  • What is the jquery tools form validations? do you have any link? – Naor Nov 27 '12 at 05:51
  • you need to show your validation script. – fengd Nov 27 '12 at 06:52
  • @Naor: http://jquerytools.org/documentation/validator/index.html – IT ppl Nov 27 '12 at 10:08
  • @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. – IT ppl Nov 27 '12 at 10:19
  • 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. – Catfish Dec 01 '12 at 15:20

4 Answers4

5

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.

John Peter
  • 2,870
  • 3
  • 27
  • 46
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

russjman
  • 486
  • 9
  • 19
  • 1
    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 - http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/ – Catfish Nov 30 '12 at 04:23
1

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.

dmi3y
  • 3,482
  • 2
  • 21
  • 32
-1

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.

Community
  • 1
  • 1
IT ppl
  • 2,626
  • 1
  • 39
  • 56