0

UPDATE:

The behavior is default salesforce behavior. It is based around the button component. Notice in the code below that there is a type="submit". When this is set on the button within a form component, there is internal validation that goes through to find the fields that you missed. At this point you can deactivate it via the default value type=button. However, this would require a custom JS handler. I'm looking into a way that can prevent the bubble still without having to go into adding a new JS function in the controller.

<lightning:button 
   aura:id="submitBtn" 
   class="slds-m-top_small" 
   variant="success" 
   label="Add" 
   title="Submit" 
   type="submit"/> 

I have an unusual request from a customer. We have a Aura Component that has some required fields on it, and we would like to only have the Server Side validation on the form (i.e. the red "Complete this field." under the field). Currently, the field validation from the server and the browser are occurring. I have checked this other stackExchange article for standard JavaScript. I attempted to use the novalidate="true" to test it, but still getting the pop-up. Anyone ever have to deal with this kind of a request? Do we have control over the standard javaScript browser behavior in Aura?

Here is the code for the input element:

<lightning:input 
    aura:id="iel" 
    type="{!col.type}" 
    pattern="[0-9]{4}" 
    messageWhenPatternMismatch = "Please enter a valid value 1234." 
    name="{!col.fieldName}" 
    label="{!(col.label)}" 
    required="{!col.required}"
/> 

ScreenShot

Please fill out this field

6
  • 2
    You would need the field not to be required, which means both in the database and in the layout to avoid this client-side prompt. Personally I would tell the customer to live with it since this is standard Salesforce behaviour. Every time you create something that behaves differently you spend extra time and make maintenance more costly. Just because a customer wants to do something doesn't mean it's a good idea to deliver it. The most valuable lesson in my professional career was being taught how to say "no" to a customer when they ask for something that's not going to help their business.
    – Phil W
    May 5 at 16:31
  • Is the "Please fill out this field" standard SF? I've got a basic form that is not showing this behavior. However, I'm not committing to the DB yet on that form.
    – thinker
    May 5 at 16:45
  • 1
    You've used a standard lightning:input component here, so I would think so. Unless your question was a trick one and you've got hidden JavaScript you wrote that is adding it ;)
    – Phil W
    May 5 at 17:04
  • Lol. Unfortunately I didn't write this code. I'm going to test with the trailhead modules and see if the pop-up actually appears.
    – thinker
    May 5 at 17:31
  • 1
    NB: Since you didn't actually use a field input, just an input, you could simply remove the required attribute and see if you get the result you want. Still, I think it silly to remove client-side prompts that appear before you submit and may save you (as a user) a bit of time...
    – Phil W
    May 5 at 17:34
0

Sorry for the late reply. The issue is surrounding the type attribute on the button. This behavior of the "Fill out this field" bubble is dependent on the button type.

When you have a button with the attribute for type set to submit you get some custom javascript validation on behalf of Salesforce.

For my business requirements, the customer just didn't want to to have two notifications that say the same thing. So the workaround I came to is using another attribute on the lightning fields.

So if a field was like this code snippet below, the bubble would pop and a default error message would appear.

 <lightning:select  aura:id="fieldId"
                              class="select-auto-width" 
                              required="{!v.isrequired}"
                              name="selectItem" 
                              label="{!v.label}" 
                              value="{!v.value}"
                              onchange="{!c.optionSelect}"
                              messageWhenValueMissing="Complete this field." 
                              >

To get the default message to disappear, you can set a custom message with the messageWhenValueMissing property by setting it to a blank.

 <lightning:select  aura:id="fieldId"
                              class="select-auto-width" 
                              required="{!v.isrequired}"
                              name="selectItem" 
                              label="{!v.label}" 
                              value="{!v.value}"
                              onchange="{!c.optionSelect}"
                              messageWhenValueMissing=" " 
                              >

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.