Using JavaScript with Entity Forms for validation

Entity Forms in Power Pages allow users to interact with Dataverse data through web interfaces. While Power Pages offer basic validation out of the box (like required fields and data types), custom JavaScript validation can significantly enhance user experience and enforce advanced logic before submission.

This guide walks you through using JavaScript with Entity Forms for validation in Power Pages.

---

Why Use JavaScript Validation in Power Pages

Scenario	Example
Domain-specific rules	Ensure a contact number starts with a country code
Cross-field validation	Compare two date fields to ensure logical order
Pattern matching	Validate complex formats (e.g., PAN, GST, ZIP code)
Prevent form submission	Stop submission unless all custom conditions are met

---

Where to Add JavaScript

You can inject custom JavaScript into an Entity Form via:

1. Portal Management App
   • Navigate to Entity Forms
   • Select your form
   • Scroll down to Additional Settings
   • Paste JavaScript into the Custom JavaScript section
2. Using Web Files
   • Create a .js Web File
   • Reference it in the Web Template or page header using a <script src="/path.js">

---

Basic Structure for Validation

$(document).ready(function () {
    // Add delay to ensure fields are fully rendered
    setTimeout(function () {
        $("form").submit(function (e) {
            // Get field values
            var email = $('#email_field').val();
            var phone = $('#phone_field').val();

            // Validation
            if (!email.includes('@')) {
                alert("Please enter a valid email address.");
                e.preventDefault(); // Prevent submission
            }

            if (phone.length < 10) {
                alert("Phone number must be at least 10 digits.");
                e.preventDefault();
            }
        });
    }, 500);
});

---

Common Validation Examples

1. Email Domain Validation

var email = $('#email_field').val();
if (!email.endsWith('@company.com')) {
    alert("Please use your company email (@company.com)");
    e.preventDefault();
}

---

2. Date Comparison (Start Date < End Date)

var startDate = new Date($('#start_date').val());
var endDate = new Date($('#end_date').val());

if (startDate >= endDate) {
    alert("Start date must be earlier than end date.");
    e.preventDefault();
}

---

3. Numeric Range Validation

var age = parseInt($('#age').val(), 10);
if (age < 18 || age > 65) {
    alert("Age must be between 18 and 65.");
    e.preventDefault();
}

---

4. Match Two Fields (e.g., Password Confirmation)

var pwd = $('#password').val();
var confirmPwd = $('#confirm_password').val();

if (pwd !== confirmPwd) {
    alert("Passwords do not match.");
    e.preventDefault();
}

---

How to Find Field IDs in Power Pages

1. Open your Entity Form on the live portal
2. Press F12 to open Developer Tools
3. Use the Inspect tool to find input field IDs
   • Most follow this format: #logicalname or #fieldname
4. Use jQuery ($('#fieldname')) in your scripts

---

Prevent Submission

Use e.preventDefault(); inside the submit event handler to block form submission.

---

Best Practices

Tip	Description
Use setTimeout()	Wait for all fields to render
Test in browser	Use Dev Tools (F12)
Keep logic modular	Create reusable validation functions
Graceful alerts	Replace alert() with modal if needed
Log for debugging	Use console.log() to track behavior

---

Advanced Tools

• Web Files: Store reusable scripts
• Liquid: Inject logic based on user roles or locale
• Form Metadata: Add client-side field rules declaratively

---

🏁 Example: Full Validation Script

$(document).ready(function () {
    setTimeout(function () {
        $("form").submit(function (e) {
            var email = $('#email_address').val();
            var phone = $('#mobile').val();
            var dob = new Date($('#birthdate').val());

            // Email must be @example.com
            if (!email.endsWith("@example.com")) {
                alert("Use your official email (@example.com)");
                e.preventDefault();
            }

            // Mobile number length
            if (phone.length != 10) {
                alert("Mobile number must be 10 digits.");
                e.preventDefault();
            }

            // DOB must be in the past
            if (dob >= new Date()) {
                alert("Date of birth must be in the past.");
                e.preventDefault();
            }
        });
    }, 500);
});