tags:

views:

36

answers:

0
Q: 

form validation stops form from being submitted if field empty, disables file field

I use validateEngine (http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/) to make sure the user fills in the appropriate fields before the form submits.

What I am having a problem is when the user hits submit without filling in all the appropriate fields, it does not submit the form, alerts the user of which fields need to be filled in and disables the file upload field, as you will see in this short screencast: http://screenr.com/LG0

This is a SAEF form in ExpressionEngine, but I am not sure if that has anything to do with it.

Any help is appreciated for how I can make the file input field to stay enabled after unsuccessfully submitting the form.

The image, doc upload slide toggle and calling validateEngine:

$('.attach-document').click(function() {$(".attach-document-section").slideToggle(100);});
$('.attach-image').click(function() {$(".attach-image-section").slideToggle(100);});
$("#entryform").validationEngine();

Rendered html of ExpressionEngine SAEF:

<form id='entryform' method="post" action="https://domain.com/post/announcement/"  >
<div class='hiddenFields'>

<input type="hidden" name="ACT" value="18" />
<input type="hidden" name="RET" value="https://domain.com/post/announcement/" />
<input type="hidden" name="PRV" value="post/announcement" />
<input type="hidden" name="URI" value="/post/announcement/" />
<input type="hidden" name="XID" value="b1c76ae356249c42a7659243cd47f6d1" />
<input type="hidden" name="return_url" value="post/thankyou" />
<input type="hidden" name="author_id" value="5" />
<input type="hidden" name="weblog_id" value="12" />
<input type="hidden" name="status" value="Approved" />
<input type="hidden" name="site_id" value="1" />
</div>

        <script type="text/javascript"> 
        <!--
        function liveUrlTitle()
        {
            var defaultTitle = '';
            var NewText = document.getElementById("title").value;

            if (defaultTitle != '')
            {
                if (NewText.substr(0, defaultTitle.length) == defaultTitle)
                {
                    NewText = NewText.substr(defaultTitle.length);
                }   
            }

            NewText = NewText.toLowerCase();
            var separator = "-";

            // Foreign Character Attempt

            var NewTextTemp = '';
            for(var pos=0; pos<NewText.length; pos++)
            {
                var c = NewText.charCodeAt(pos);

                if (c >= 32 && c < 128)
                {
                    NewTextTemp += NewText.charAt(pos);
                }
                else
                {
                    if (c == '223') {NewTextTemp += 'ss'; continue;}
                if (c == '224') {NewTextTemp += 'a'; continue;}
                if (c == '225') {NewTextTemp += 'a'; continue;}
                if (c == '226') {NewTextTemp += 'a'; continue;}
                if (c == '229') {NewTextTemp += 'a'; continue;}
                if (c == '227') {NewTextTemp += 'ae'; continue;}
                if (c == '230') {NewTextTemp += 'ae'; continue;}
                if (c == '228') {NewTextTemp += 'ae'; continue;}
                if (c == '231') {NewTextTemp += 'c'; continue;}
                if (c == '232') {NewTextTemp += 'e'; continue;}
                if (c == '233') {NewTextTemp += 'e'; continue;}
                if (c == '234') {NewTextTemp += 'e'; continue;}
                if (c == '235') {NewTextTemp += 'e'; continue;}
                if (c == '236') {NewTextTemp += 'i'; continue;}
                if (c == '237') {NewTextTemp += 'i'; continue;}
                if (c == '238') {NewTextTemp += 'i'; continue;}
                if (c == '239') {NewTextTemp += 'i'; continue;}
                if (c == '241') {NewTextTemp += 'n'; continue;}
                if (c == '242') {NewTextTemp += 'o'; continue;}
                if (c == '243') {NewTextTemp += 'o'; continue;}
                if (c == '244') {NewTextTemp += 'o'; continue;}
                if (c == '245') {NewTextTemp += 'o'; continue;}
                if (c == '246') {NewTextTemp += 'oe'; continue;}
                if (c == '249') {NewTextTemp += 'u'; continue;}
                if (c == '250') {NewTextTemp += 'u'; continue;}
                if (c == '251') {NewTextTemp += 'u'; continue;}
                if (c == '252') {NewTextTemp += 'ue'; continue;}
                if (c == '255') {NewTextTemp += 'y'; continue;}
                if (c == '257') {NewTextTemp += 'aa'; continue;}
                if (c == '269') {NewTextTemp += 'ch'; continue;}
                if (c == '275') {NewTextTemp += 'ee'; continue;}
                if (c == '291') {NewTextTemp += 'gj'; continue;}
                if (c == '299') {NewTextTemp += 'ii'; continue;}
                if (c == '311') {NewTextTemp += 'kj'; continue;}
                if (c == '316') {NewTextTemp += 'lj'; continue;}
                if (c == '326') {NewTextTemp += 'nj'; continue;}
                if (c == '353') {NewTextTemp += 'sh'; continue;}
                if (c == '363') {NewTextTemp += 'uu'; continue;}
                if (c == '382') {NewTextTemp += 'zh'; continue;}
                if (c == '256') {NewTextTemp += 'aa'; continue;}
                if (c == '268') {NewTextTemp += 'ch'; continue;}
                if (c == '274') {NewTextTemp += 'ee'; continue;}
                if (c == '290') {NewTextTemp += 'gj'; continue;}
                if (c == '298') {NewTextTemp += 'ii'; continue;}
                if (c == '310') {NewTextTemp += 'kj'; continue;}
                if (c == '315') {NewTextTemp += 'lj'; continue;}
                if (c == '325') {NewTextTemp += 'nj'; continue;}
                if (c == '352') {NewTextTemp += 'sh'; continue;}
                if (c == '362') {NewTextTemp += 'uu'; continue;}
                if (c == '381') {NewTextTemp += 'zh'; continue;}

                }
            }

            var multiReg = new RegExp(separator + '{2,}', 'g');

            NewText = NewTextTemp;

            NewText = NewText.replace('/<(.*?)>/g', '');
            NewText = NewText.replace(/\s+/g, separator);
            NewText = NewText.replace(/\//g, separator);
            NewText = NewText.replace(/[^a-z0-9\-\._]/g,'');
            NewText = NewText.replace(/\+/g, separator);
            NewText = NewText.replace(multiReg, separator);
            NewText = NewText.replace(/-$/g,'');
            NewText = NewText.replace(/_$/g,'');
            NewText = NewText.replace(/^_/g,'');
            NewText = NewText.replace(/^-/g,'');

            if (document.getElementById("url_title"))
            {
                document.getElementById("url_title").value = "" + NewText;          
            }
            else
            {
                document.forms['entryform'].elements['url_title'].value = "" + NewText; 
            }       
        }


        function showhide_item(id)
        {
            if (document.getElementById(id).style.display == "block")
            {
                document.getElementById(id).style.display = "none";
            }
            else
            {
                document.getElementById(id).style.display = "block";
            }
        }


        -->
        </script>


            <p>Who should see this?<br />

            <select name="category[]" size="4" multiple="multiple" id="group" class="block validate[required]">
                <option value='7'>Faculty</option>
<option value='8'>Staff</option>
<option value='6'>Students</option>

            </select>
            </p>


            <p>* Title:<br /><input type="text" name="title" id="title" value="" size="100" maxlength="100" class="block validate[required]" /><input type="hidden" dir="ltr" id="field_id_30" name="field_id_30" value="Brad Morse" maxlength="128" size="50" /><input type="hidden" name="dst_enabled" value="y"  /></p> 

            <p>* Body of Announcement<br />

            <textarea id="field_id_35" name="field_id_35" dir="ltr" cols="100" rows="6" class="block validate[required]"></textarea></p>

            <p><a href="#" class="attach-image">Attach Image &raquo;</a></p>
            <div class="attach-image-section">
<div class='ff-ft' ><div id="field_id_36" class="matrix" style="margin: 5px 8px 12px 0"><table class="matrix" cellspacing="0" cellpadding="0" border="0"><thead class="matrix"><tr class="matrix matrix-first matrix-last"><th class="matrix matrix-first"></th><th class="matrix" scope="col">Caption</th><th class="matrix matrix-last" scope="col">Upload Image</th></tr></thead><tbody class="matrix"><tr class="matrix matrix-first matrix-last"><th class="matrix matrix-first"><div><span>1</span><a title="Options"></a></div><input type="hidden" name="field_id_36[row_order][]" value="row_new_0" /></th><td class="matrix matrix-firstcell matrix-text"><textarea class="matrix-textarea" name="field_id_36[row_new_0][col_id_20]" rows="1"></textarea><div><div>128</div></div></td><td class="matrix matrix-last"><div class='ngen-file-field-block'><input type='file' name='field_id_36[row_new_0][col_id_21]' class='ngen-file-input' />
<input type='hidden' name='field_id_36[row_new_0][col_id_21][file_name]' />
</div></td></tr></tbody></table><a class="matrix-btn matrix-add" title="Add row"></a></div></div>
</div>

            <p><a href="#" class="attach-document">Attach Document &raquo;</a></p>
            <div class="attach-document-section">
<div class='ff-ft' ><div id="field_id_37" class="matrix" style="margin: 5px 8px 12px 0"><table class="matrix" cellspacing="0" cellpadding="0" border="0"><thead class="matrix"><tr class="matrix matrix-first matrix-last"><th class="matrix matrix-first"></th><th class="matrix" scope="col">Title</th><th class="matrix matrix-last" scope="col">Upload Document</th></tr></thead><tbody class="matrix"><tr class="matrix matrix-first matrix-last"><th class="matrix matrix-first"><div><span>1</span><a title="Options"></a></div><input type="hidden" name="field_id_37[row_order][]" value="row_new_0" /></th><td class="matrix matrix-firstcell matrix-text"><textarea class="matrix-textarea" name="field_id_37[row_new_0][col_id_22]" rows="1"></textarea><div><div>128</div></div></td><td class="matrix matrix-last"><div class='ngen-file-field-block'><input type='file' name='field_id_37[row_new_0][col_id_23]' class='ngen-file-input' />
<input type='hidden' name='field_id_37[row_new_0][col_id_23][file_name]' />
</div></td></tr></tbody></table><a class="matrix-btn matrix-add" title="Add row"></a></div></div>
</div>

            <p><input type="submit" name="submit" value="Submit" /></p>


<link rel="stylesheet" type="text/css" href="https://domain.com/themes/third_party/matrix/styles/matrix.css" />

<link rel="stylesheet" type="text/css" href="https://domain.com/ee_system/extensions/fieldtypes/ngen_file_field/styles/ngen_file_field.css" charset="utf-8" />

<script type="text/javascript">;FT_URL = "https://domain.com/ee_system/extensions/fieldtypes/";&lt;/script&gt;

<script type="text/javascript" src="https://domain.com/themes/third_party/matrix/scripts/matrix.js"&gt;&lt;/script&gt;

<script type="text/javascript">;
Matrix.lang = { add_row_above: "Add row above", add_row_below: "Add row below", remove_row: "Remove row" };
</script>

<script type="text/javascript" src="https://domain.com/themes/third_party/matrix/scripts/matrix_text.js" charset="utf-8"></script>

<script type="text/javascript" src="https://domain.com/ee_system/extensions/fieldtypes/ngen_file_field/scripts/jquery.livequery.js" charset="utf-8"></script>

<script type="text/javascript" src="https://domain.com/ee_system/extensions/fieldtypes/ngen_file_field/scripts/jquery.ngen_file_field.js" charset="utf-8"></script>

<script type="text/javascript">;
nGenFile.lang.use_existing = "or <a href='#'>use an existing file</a>";nGenFile.lang.use_existing_cancel = "cancel";nGenFile.lang.uploading = "Uploading...";nGenFile.thumbpaths["{DEFAULT}"] = "http://domain.com/images/announcements/";
</script>

<script type="text/javascript">;
nGenFile.lang.use_existing = "or <a href='#'>use an existing file</a>";nGenFile.lang.use_existing_cancel = "cancel";nGenFile.lang.uploading = "Uploading...";nGenFile.thumbpaths["field_id_36"] = "http://domain.com/images/announcements/";
</script>

<script type="text/javascript">;
jQuery(document).ready(function(){var m = new Matrix("field_id_36", "", [{"id":"col_id_20","name":"caption","label":"Caption","required":false,"settings":{"maxl":"128","size":"","multiline":"n"},"type":"text","newCellHtml":"<textarea class=\"matrix-textarea\" name=\"{DEFAULT}\" rows=\"1\"><\/textarea><div><div>128<\/div><\/div>","newCellSettings":false,"newCellClass":"matrix-text"},{"id":"col_id_21","name":"file","label":"Upload Image","required":false,"settings":{"options":"12","hide_existing":"y"},"type":"ngen_file_field","newCellHtml":"<div class='ngen-file-field-block'><input type='file' name='{DEFAULT}' class='ngen-file-input' \/>\n<input type='hidden' name='{DEFAULT}[file_name]' \/>\n<\/div>","newCellSettings":false,"newCellClass":false}], [{"id":"row_new_0","cellSettings":[]}], 5);
m.totalNewRows = 1;})
</script>

<script type="text/javascript">;
nGenFile.lang.use_existing = "or <a href='#'>use an existing file</a>";nGenFile.lang.use_existing_cancel = "cancel";nGenFile.lang.uploading = "Uploading...";nGenFile.thumbpaths["field_id_37"] = "http://domain.com/images/announcements/";
</script>

<script type="text/javascript">;
jQuery(document).ready(function(){var m = new Matrix("field_id_37", "", [{"id":"col_id_22","name":"title","label":"Title","required":false,"settings":{"maxl":"128"},"type":"text","newCellHtml":"<textarea class=\"matrix-textarea\" name=\"{DEFAULT}\" rows=\"1\"><\/textarea><div><div>128<\/div><\/div>","newCellSettings":false,"newCellClass":"matrix-text"},{"id":"col_id_23","name":"file","label":"Upload Document","required":false,"settings":{"options":"12","hide_existing":"y"},"type":"ngen_file_field","newCellHtml":"<div class='ngen-file-field-block'><input type='file' name='{DEFAULT}' class='ngen-file-input' \/>\n<input type='hidden' name='{DEFAULT}[file_name]' \/>\n<\/div>","newCellSettings":false,"newCellClass":false}], [{"id":"row_new_0","cellSettings":[]}], 5);
m.totalNewRows = 1;})
</script>
</form>

I think I resolved it by editing a line in jquery.ngen_file_field.js - http://cl.ly/c5656a5a4be5b81e6c8e (this is the nGenWorks file fieldtype for expressionengine http://www.ngenworks.com/software/ee/ngen-file-field/)

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?