Haml -Illegal nesting: nesting within plain text is illegal ruby on rails - ruby-on-rails

Question

I don't use haml a lot since mainly I always use erb , although for this particular project they want me to use it.
The error is after the form, and I am using tabs rather than spaces. Any idea why this is not working?
%div(id="openModal" class="modalDialog")
%div
%a(href="#close" title="Close" class="close")
<form id="car-form" enctype="multipart/form-data" action="/cars" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="dNdUmF8Kp5jFgXwtBIV0W6NS8anp28Y7Ts7AOQGqez/BoSzlB1bb+5VXLU148dJClYXdOx/qV6b2QdBOIsEmxQ==">
<div class="control-group">
<label for="Year">Year</label>
<br>
<input type="text" name="year" id="year" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
</div>
<br>
<div class="control-group">
<label for="make">Make</label>
<br>
<select class="chosen" name="make" style="display: none;">
<option value="1">Jeep</option>
<option value="2">Range Rover</option>
<option value="3">ferrari</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 200px;" title=""><a class="chosen-single"><span>Jeep</span><div><b></b></div></a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
</div>
<br>
<div class="control-group">
<label for="Model">Model</label>
<br>
<input type="text" name="model" id="model">
</div>
<br>
<div class="control-group">
<label for="Trim">Trim</label>
<br>
<input type="text" name="trim" id="trim">
</div>
<br>
<div class="control-group">
<label for="Car_Image_s_">Car image(s)</label>
<br>
<input type="file" name="files[]" id="files_">
</div>
<br>
<input type="submit" name="commit" value="Save changes">
</form>

Answer 1

Are you hand coding all of that? In HAML, it should look something more like:
#openModal.modalDialog
%div
= link_to "Close", anchor: "close", class: "close"
= form_tag cars_path, id: "car-form", multipart: true
.control-group
= label_tag "year"
= text_field_tag "year"
.control-group
= label_tag "make"
= select_tag "make", options_for_select(["Jeep","Range Rover","Ferrari"])
.chosen-container.chosen-container-single
.chosen-drop
.chosen-search
= text_field_tag "search", nil, autocomplete: 'off'
%ul.chosen-results
.control-group
= label_tag "model"
= text_field_tag "model"
.control-group
= label_tag "trim"
= text_field_tag "trim"
.control-group
= label_tag "files", "Care Image(s)"
= file_field_tag "files[]", multiple: true
= submit_tag "Save changes"
I haven't tested it, so there might be some bugs. But, if you're going to use HAML, you might as well, um, use HAML.
Anyway, to answer your question, my guess is that HAML is interpreting:
<form id="car-form" enctype="multipart/form-data" action="/cars" accept-charset="UTF-8" method="post">
as plain text (since <form ... > isn't valid HAML). Therefore, when you do this:
<form id="car-form" enctype="multipart/form-data" action="/cars" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
the second line (which is also interpreted as text) throws the illegal nesting error.
p.s. There was styling for the year input. You should really do that in a sass file (or whatever styling format you're using).
p.p.s. Hard coding your authenticity token seems like it's going to break.