How can I make input field border colour is red when user trying to submit form without entering field value?

soujanyadarla

Asked on February 14, 2019 at 2:30 AM

Victoria_K

Replied on February 14, 2019 at 7:48 AM

Normally, it is enough to set a field as required for the border to be in red when user trying to submit form without entering field value. To set a field as required, please right click on it and select 'Require' option:

How can I make input field border colour is red when user trying to submit form without entering field value? Image 1 Screenshot 20

If you are experiencing difficulties with specific form, please provide us the link and we will gladly take a look.

soujanyadarla

Replied on February 14, 2019 at 9:53 PM

HI Victoria_K

Thank you for your response this ismy link can you help me

https://c.cs58.visual.force.com/apex/ApplicationWizardFirstPageNew

soujanyadarla

Replied on February 14, 2019 at 9:54 PM

<!--

Created By: Guna

Created Date :21/11/2018

Description : For Connect to Unbounce Lead creation

-->

<!--

Modified By: soujanya

Modified Date :14/02/2019

Description :Redesign the unbounce page

-->

<apex:page sidebar="false" showHeader="false" standardStylesheets="false">

<apex:includescript value="{!$Resource.Unbounce_Images}"/>

<apex:stylesheet value="{!$Resource.UnbounceCss}"/>

<apex:includescript value="{!$Resource.Unbounce_fonts}"/>

<apex:includescript value="{!$Resource.Unbounce_js}"/>

<head>

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-W9WSRV');</script>

<!-- End Google Tag Manager --

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-38245265-7');

</script>

window._mfq = window._mfq || [];

(function() {

var mf = document.createElement("script");

mf.type = "text/javascript"; mf.async = true;

mf.src = "//cdn.mouseflow.com/projects/fb58ebfa-a88c-446d-a4e0-763b8284a3dd.js";

document.getElementsByTagName("head")[0].appendChild(mf);

})();

</script>

/* custom configuration goes here (www.olark.com/documentation) */

olark.identify('3095-583-10-8217');</script>

<style>

.container-fluid start_application, .form_content{

font-family: 'Open Sans', sans-serif;

}

.caption {

display: table-caption;

text-align: -webkit-center;

}

.option:checked {

display: none;

}

</style>

</head>

<body>

<h1>Start your application</h1>

<br/>

<span>Won′t impact your credit score</span>

</div>

</div>

<div class="star_level">Excellent <img src="{!URLFOR($Resource.Unbounce_Images,'img/ratings_5star.png')}" alt="star1"/></div>

<div class="number_points"><span>9.7</span> out of 10 TrustScore on</div>

</div>

</div>

</div>

</div>

<p>10 min<br>application</br></p>

<p>Approval<br>within 24 hours</br></p>

<p>Next Day <br> Funding</br></p>

</div>

<tr>

<th><img src="{!URLFOR($Resource.Unbounce_Images,'img/chechmark.png')}" alt="chechmark3"/></th><td>9+ Months in business</td>

</tr>

<tr>

<th><img src="{!URLFOR($Resource.Unbounce_Images,'img/chechmark.png')}" alt="chechmark3"/></th><td>$10K or more sales per month</td>

</tr>

<tr>

<th><img src="{!URLFOR($Resource.Unbounce_Images,'img/chechmark.png')}" alt="chechmark3"/></th><td>ABN Number</td>

</tr>

<tr>

<th><img src="{!URLFOR($Resource.Unbounce_Images,'img/chechmark.png')}" alt="chechmark3"/></th><td>Drivers Licence</td>

</tr>

</table>

</div>

<span>

</span>

<span>

<a href="mailto:getfinance@getcapital.com.au" style="color:#798086;">getfinance@getcapital.com.au</a>

</span>

<!--<span>

start live chat

</span>-->

</div>

<p>First Name*</p>

</div>

</div>

<p>Business Name*</p>

</div>

<p>Phone Number*</p>

</div>

<p>Email*</p>

</div>

<p>Time in Business*</p>

<option>0 - 9 Months</option>

<option>More than 9 Months</option>

</select>

</div>

<p>Current Monthly Turnover*</p>

</div>

<span style="color:#9EA3A8;"> By continuing, you agree to our </span><a href="https://www.getcapital.com.au/privacy/"> Privacy Policy.</a>

</p>

</form>

</div>

</body>

</html>

</apex:page>

THis my code

soujanyadarla

Replied on February 14, 2019 at 10:24 PM

How can I make input field border colour is red when user trying to submit form without entering field value? Image 10

Can you look at once when i click continue its showing blue color i need to red border color should be red when i click continue button

roneet

Replied on February 15, 2019 at 2:03 AM

Is this something related to JotForm or some other website?

Do you want to inject CSS code in your Form or salesforce website? The URL which you have provided seems to be a SalesForce one.

Please confirm us.

Thanks.