Disable "Please Fill Out This Form" bubble on Aura Component

Question

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

Answer 1

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=" " 
                              >