I am trying to use haml in a partial, I wrote:
%p.nested-check-fields
= f.input :is_correct
= link_to_remove_fields "remove choice", f
but, in the resulted HTML, I get
<p class="nested-check-fields"> </p>
<div class="input boolean optional">
<input type="hidden" value="0" name="quiz[quiz_choices_attributes][1320389712363][is_correct]">
<input id="quiz_quiz_choices_attributes_1320389712363_is_correct" class="boolean optional" type="checkbox" value="1" name="quiz[quiz_choices_attributes][1320389712363][is_correct]">
<label class="boolean optional" for="quiz_quiz_choices_attributes_1320389712363_is_correct"> Is correct</label>
</div>
The question is, why the <p class="nested-check-fields"> </p> is empty ?? I was expecting to wrap the div inside it, what's wrong ??
Haml is very strict about indentation (from the documentation):
Haml’s indentation can be made up of one or more tabs or spaces.
However, indentation must be consistent within a given document. Hard
tabs and spaces can’t be mixed, and the same number of tabs or spaces
must be used throughout.
It sounds like you can actually use 4 spaces instead of 2, but that means you have to use 4 spaces everywhere (you can't mix it). I'd recommend just sticking with 2-space indentation, as that's the most common.
Related
I'm playing around with htmx and hyperscript and I want the "submit button" (Add User) to be enabled when all required input fields are valid in a form. In this case, a non-empty name and a valid email address must have been defined.
<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend">
<label class="control-label" for="nameInput">Name</label>
<input id="nameInput" name="name" class="form-control" type="text" required placeholder="John Doe"/>
<label class="control-label" for="emailInput">Email</label>
<input id="emailInput" name="email" class="form-control" type="email" required placeholder="john#doe.org"/>
<button _="<what should I write here??>" class="btn btn-primary" disabled>Add User</button>
</div>
</form>
What should I write instead of <what should I write here??> to make this happen?
Something like this should work:
<button _="on change from closest <form/>
for elt in <[required]/>
if the elt's value is empty
add #disabled then exit
end
end
remove #disabled" class="btn btn-primary" disabled>Add User</button>
https://jsfiddle.net/xy8vn5jk/20/
I like #1cg answer
I have slightly more stringent requirements than the OP.
What I required is such that when the user types but doesn't leave the focus, the button should still disable or enable correctly.
If use keyup is wiser to use debounced,
hence my version is
<button _="on keyup from closest <form/> debounced at 150ms
if (<[required]:invalid/>).length > 0
add #disabled
put 'Check All Fields' into me
then exit
end
remove #disabled
put 'Submit' into me
" disabled type="submit">
Fill Out Required Fields
</button>
https://codepen.io/simkimsia/pen/LYQgZZK
by using [required]:invalid and comparing the length you can avoid doing a for loop and a nested if. Please note the parenthesis to wrap ([required]:invalid)
As far as I know, BEM does not use elements id at all. But how to deal in this case with the label for/id combined with inputs? If I do not use id, people who're using screen readers will not get that this label is for that input. Am I right?
BEM suggests avoiding id for css selectors. It's perfectly valid to use id for A11y and usability.
<form class="form" method="post" action="">
<label for="email" class="form__label">Email</label>
<input type="email" id="email" class="form__control"/>
</form>
In the example above we are styling the input as an Element of the form block with the form__control class.
Also you can not use aria attributes without id for pointers to descriptive elements.
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>
Example taken from: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
i have this website im building, my client is using a template and the template has contact forms, now i cant seem to understand how to get the text fade on click for input fields to work on any additional fields i make on top of what was there on the template.
http://daniloportal.com/NPC2/contact.html
on that page take a look at the form, the values with *'s disappear but the clone EMAIL input i made doesnt cause i took the * off the value.
Ive been going crazy trying to figure out where this is being configured on the page, If any inspect elementors can take a look and let me know i would greatly appreciate it!
this is the code snip
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email *" title="Email *" />
<input type="text" name="email" value="Email " title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
Search your code to find what makes the input's value disappear. E.g., look for behavior that clears the value of form fields (either element.value = '' if using plain javascript, or element.val('') if using jquery).
Then you can see what is the condition to clearing it. In your case, seems that the condition is that the input's value is equal to it's "title" attribute (you can edit both using "Inspect Element" in Chrome).
I have the following code, and hate having to indent code to the same line when I just want it to stay as it is?
What I have to indent it to:
.content.first
Thank you for taking our Survey, hope you had fun!!!
<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup" style="text-align:center">
<form onsubmit="_kmq.push(['record', 'sign up for our newsletter'])" action="http://socialcrunch.us5.list-manage.com/subscribe/post?u=755f44e55d468b9568a7ec9de&id=7f27e118c4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
%label{:style=>"text-align:center"}
%br
Like spandex wearing gym freaks, SocialCrunch is in training.
%br
%br
You have been one of the first people to take part in a test which will form the basis of our website.
%br
%br
Input your email below to learn more about SocialCrunch and our launch later this summer!
%br
%br
Thank you for taking part, we hope you had fun.
<input style="margin-left: 21%;text-align:center" type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<div class="clear"><input style="margin-left:33%" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
Can I run it through some filter that will ignore my indentation and wont complain?
HAML syntax is indentation sensitive and there is no 'filter' which will ignore your indentation. HAML uses indentation to convert your code properly to respective HTML code blocks.
If you are tired of manually indenting your haml code and are using emacs as your editor then you can follow the instructions here
http://emacswiki.org/emacs/HamlMode
and permanently solve your problem
I cannot solve this because i have many third party content (open licensed) that have some rules that doesnt work with this.
This is the principal code:
<input id="submit" class="btn-success" name="submit" type="submit" value="Comment" tabindex="7" />
This show a good button to submit my content. But now i want to include in the "value" a little icon image before the text. The other third party give me this code to include an icon where i want, just putting tag with the class of the icon that they offer, in this case:
<i class="icon-comment icon-white"></i>
Normaly, this will work, but in this case is not printed correctly cause is inside "value":
<input id="submit" class="btn-success" name="submit" type="submit" value="<i class="icon-comment icon-white"></i>Comment" tabindex="7" />
If you can see the value content, it only read until class= cause there is another quote.
How can I include all the content inside value without this kind of errors?