Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Dynamic Fields Validation Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ var fieldIndex = 1; $("#addField").click(function(){ fieldIndex++; var newField = $("<input type='text' name='field" + fieldIndex + "' placeholder='Field " + fieldIndex + "'><br>"); $("#dynamicFields").append(newField); }); $("form").submit(function(event){ event.preventDefault(); var isValid = true; $("#dynamicFields input").each(function(){ if ($(this).val() === "") { isValid = false; } }); if (isValid) { alert("Form submitted successfully."); } else { alert("All fields are required."); } }); }); </script> </head> <body> <form> <div id="dynamicFields"> <input type="text" name="field1" placeholder="Field 1"><br> </div> <button type="button" id="addField">Add Field</button><br> <input type="submit" value="Submit"> </form> </body> </html>
console output