1

I'm building a wizard where I've a page splitted in some sections. One of them is shown/hidden based on the value selected for a picklist of another section, by using JQuery. But, the conditional section contains some required fields. So, even if the section remains hidden, when I try to save I get the error because of the null field that shoul be required. (and I can see the error on the field If I make the conditional section appear). This troubles do not exist, instead, when exploiting the rendered attribute(that I cannot use because I need something on the fly).

Any suggestions?

Improve this question
4
  • 2
    Use action regions around the items you want to process so it will ignore the required fields
    – Eric
    Commented Dec 23, 2014 at 17:15
  • Why use jQuery to hide the section instead of forcing a re-render using an apex:actionSupport from your picklist? If you use the standard re-render, then you can use VisualForce to simply not render the field anymore.
    – drakored
    Commented Dec 30, 2014 at 15:51
  • Are your fields inside of a form <input> tag?
    – crmprogdev
    Commented Jan 2, 2015 at 21:18
  • Are those fields actually required or simply required if they are visible?
    – Charles Koppelman
    Commented Jan 7, 2015 at 6:41

4 Answers 4

Reset to default
1

I'm not sure whether the field needs to be required when it's invisible? If not, simply use a validation rule to check whether the picklist that reveals the hidden section has a value. Then you can validate whether the required field has a value.

An alternative solution would be to use jQuery to:

  • check whether any of the fields in the hidden section(s) contain any input and show the section if it does.
  • find all elements with class "errorMsg", check whether the error message inside matches with that of a hidden field, show the related section if it does.

This way your field can stay required. Keep in mind that if you want the picklist that was meant to reveal this section to be filled in too, you'll need to make it required.

Improve this answer
1
  • If you think the jQuery solution would suit you but can't get it to work, do leave a comment.
    – Koen Wesselman
    Commented Dec 31, 2014 at 10:05
0

Immediate Flag

If you set the immediate attribute of the any action element (i.e. commandButton) to true the action method will execute before any validations and the required field gets ignored. You can check the required fields in the controller method and throw error if value not present.

Although I'm not taking you to complete solution but try playing around the immediate attribute on Command Button.

Improve this answer
0

One way to tackle this is that when you "Save" an record, insert a generalized value for the required field in trigger (Before Insert) if the field is empty.

If the field has some values, go ahead and skip the above logic.

Also, Inserting "generalized value" will work only if the business logic makes sense.

Improve this answer
0

Any fields that are required will use the aria-required attribute which you'll be able to access and will show as aria-invalid if there's an error. You have a couple of options for handling your situation. One option would be to utilize the capabilities of a jQuery plug-in like the jQuery Validation Plug-in to check for fields which aren't visible or that have null values, etc, then display them before allowing a save. Any required fields which are hidden (aria-hidden), can then be made visible for editing before the user is allowed to save.

Since you're already manipulating visibility, you can also simply check for the error flag that would appear using your own code and then display it the field along with an error message. Below is an example using jQuery of how to validate a form that you could modify for your purposes without the need of a plug-in. I believe the jQuery Validation Plug-in essentially automates the process of looking for or manipulating the aria attributes while this type of code would allow you to access them directly. 

<!DOCTYPE HTML>
<html lang="en">
 <head> <title>Input Error Notification with aria-live=assertive and aria-invalid using jQuery</title> 
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script>
$(document).ready(function(e) {
    $('#signup').submit(function() {
        $('#errText').html('');
$('input').removeAttr("aria-invalid");
$('label').removeAttr("class");
var eFlag = 0;
        if ($('#first').val() === '') {
            $('#first').attr("aria-invalid", "true");
$("label[for='first']").addClass('failed');
eFlag++;
        }
        if ($('#last').val() === '') {
            $('#last').attr("aria-invalid", "true");
$("label[for='last']").addClass('failed');
eFlag++;
        } 
        if ($('#email').val() === '') {
            $('#email').attr("aria-invalid", "true");
$("label[for='email']").addClass('failed');
eFlag++;
        } 
if (eFlag > 0) {
        $('#errText').html("Please complete  all required fields (" + eFlag + ") and retry").focus();
}
        return false;
    });
});
</script>
<style type="text/css">
label.failed {
    border: red thin solid;
}
</style>

</head>
<body>
<h2 tabindex="-1" id="errText" aria-live="assertive"></h2>
<form name="signup" id="signup" method="post" action="#">
 <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>
<hr />
<p style="margin: 0;" role="contentinfo">Created by Sailesh Panchang, Deque Systems | December 27, 2013</p>
</body>
</html>
Improve this answer

You must log in to answer this question.