📝 AppML – Forms and Form Validation: Build Smart Forms Without JavaScript

🧲 Introduction – Why Use AppML for Forms?

Forms are the core of user input across the web. Whether it’s signing up users, collecting feedback, or processing orders—forms are essential. With AppML, you can build smart, validated forms using just HTML + JSON + Models. No JavaScript or backend code is required for basic setups.

🎯 What you’ll learn:

• Create dynamic forms using AppML
• Use appml-model to apply validation rules
• Bind form input to data sources with appml-data
• Handle submission using appml-submit
• Show success/error messages with appml-message

---

🔧 Step-by-Step: Create a Simple Contact Form

📁 Model File – models/contact-model.json

{
  "key": "id",
  "fields": [
    { "name": "name", "required": true },
    { "name": "email", "required": true },
    { "name": "message", "required": true }
  ]
}

📌 Explanation:

• "key": "id" – Unique identifier for each contact entry.
• "fields" – Defines each input field:
  • name, email, message – All marked "required": true, so the form will not submit if any of them are empty.

---

📄 Data File – data/contacts.json

[
  {
    "id": 1,
    "name": "John Doe",
    "email": "john@example.com",
    "message": "Hi, this is great!"
  }
]

📌 Explanation:

• This JSON array stores previously submitted form data.
• AppML will fetch and append to this file when form data is submitted (if backend logic is implemented).

---

🖥️ HTML File – contact.html

<div 
  appml-model="models/contact-model.json" 
  appml-data="data/contacts.json" 
  appml-message>
  
  <h2>Contact Us</h2>
  
  <input name="name" placeholder="Your Name">
  <input name="email" type="email" placeholder="Your Email">
  <textarea name="message" placeholder="Your Message"></textarea>
  
  <button appml-submit>Send</button>
</div>

📌 Explanation (line-by-line):

• <div> – This is the AppML form container.
  • appml-model="..." links to the model that defines field rules.
  • appml-data="..." binds this form to the contacts data file.
  • appml-message allows AppML to show success/error messages here.
• <input name="name"> – Binds user name input to the name field in the model.
• <input name="email" type="email"> – Binds to the email field and uses HTML5 validation.
• <textarea name="message"> – Binds to the message field.
• <button appml-submit> – Submits the form. AppML will validate and handle the data automatically.

---

🔍 Example: Order Form With Number Validation

📁 Model File – models/order-model.json

{
  "key": "id",
  "fields": [
    { "name": "product", "required": true },
    { "name": "quantity", "required": true, "datatype": "number" }
  ]
}

📌 Explanation:

• Two fields:
  • product – Must be filled out.
  • quantity – Required and must be a number.

---

🖥️ HTML Order Form – order.html

<div 
  appml-model="models/order-model.json" 
  appml-data="data/orders.json" 
  appml-message>
  
  <h2>Place Your Order</h2>
  
  <input name="product" placeholder="Product Name">
  <input name="quantity" type="number" placeholder="Quantity">
  
  <button appml-submit>Order Now</button>
</div>

📌 Explanation:

• appml-model="..." loads validation for product and quantity.
• appml-data="..." binds to orders.json, where form entries will be stored.
• input name="product" – Tied to the product field.
• input name="quantity" – Must be a number due to the model rule and type="number".

---

✅ Add Real-Time Validation with a Controller

🧠 JavaScript File – controllers/contact.js

myAppML.onvalidate = function() {
  if (!myAppML.data.email.includes("@")) {
    myAppML.message = "Invalid email format.";
    return false;
  }
  return true;
};

📌 Explanation:

• onvalidate is called before submission.
• myAppML.data.email checks if the input contains an @ symbol.
• myAppML.message displays an error if validation fails.
• return false blocks submission.

---

💬 Add Controller to HTML

<div 
  appml-model="models/contact-model.json" 
  appml-data="data/contacts.json" 
  appml-controller="controllers/contact.js"
  appml-message>
  
  <!-- Form contents -->
</div>

📌 Adds controller logic to the form. AppML will auto-run the script on validation.

---

🧰 AppML Form Attribute Overview

Attribute	Description
appml-model	Specifies validation rules via a JSON model file
appml-data	Binds form data to a backend endpoint or JSON file
appml-controller	Adds advanced logic for validation or processing
appml-submit	Submits the form and triggers validation
appml-message	Displays success or error messages

---

📌 Summary – Recap & Key Takeaways

AppML lets you build complete, validated forms using HTML-only syntax powered by declarative data and model files. You can handle user input, validate it, and manage messages all without custom JavaScript.

🔍 Key Takeaways:

• Define validation rules in appml-model
• Bind your forms to data sources using appml-data
• Submit and process data with appml-submit
• Display feedback with appml-message
• Add extra validation with appml-controller if needed

⚙️ AppML forms are perfect for contact pages, surveys, admin panels, and classroom apps—offering low-code power with high usability.

---

❓ FAQs – AppML Forms and Validation

---

❓ Can I submit the form to a backend script like PHP?
✅ Yes. Use a server-side appml-data endpoint (e.g., data.php) instead of a static JSON file.

---

❓ Does HTML5 validation work together with AppML?
✅ Yes. Browser validation (e.g., type="email") complements AppML model rules.

---

❓ How do I reset a form after submission?
✅ Use a <button type="reset">Reset</button> or script it with AppML’s controller if needed.

---

❓ Can I style appml-message output?
✅ Absolutely. Use custom CSS to format messages (e.g., error in red, success in green).

---

❓ Does AppML support dropdowns and radio buttons?
✅ Yes. All standard HTML inputs work and bind using the name attribute and model fields.

---

Share Now :