Form Validation | Fetch API|| WDD330📱

Form Validation

  1. The form validation helps to prevent corrupted data to access or database.

  2. This validation can be done by the browser and the server

    validation by the browser you can use required attribute.

    input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry"

  3. You can use a regular expression (regex) to validate the input in the browser.

    Another useful validation feature is the pattern attribute, which expects a Regular Expression as its value.

  4. Another validation we can have is to control the length of the entries to avoid the user adding any malicious characters or data.

  5. Another way to validate a form is by manipulating and validating the datatype or value of the entries. type="text"type="number"

  6. The form is vulnerable to SQL injection attacks to avoid that you need to validate the form using min="1" max="10" minlength or maxlength

  7. The Validation forms using JavaScript, this validation can take control over the look and you can see an error message to the users

  8. The server validation can create in PHP to validate the input and show an error message in the input.

  9. Validation form without built-in API; In some cases, such as custom controls, you won't be able to or won't want to use the Constraint Validation API. You're still able to use JavaScript to validate your form, but you'll just have to write your own.

Fetch API

  1. The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

  2. Using the fetch method you can consume the API for different resources.

    fetch('http://example.com/movies.json') .then((response) => response.json()) .then((data) => console.log(data));

  3. you can upload files
    const formData = new FormData();
    const fileField = document.querySelector('input[type="file"]');

    formData.append('username', 'abc123');
    formData.append('avatar', fileField.files[0]);
    fetch('https://example.com/profile/avatar', {
    method: 'PUT',
    body: formData
    })
    .then((response) => response.json())
    .then((result) => {
    console.log('Success:', result);
    })
    .catch((error) => {
    console.error('Error:', error);
    });

  4. uploading JSON data const data = { username: 'example' };

    fetch('https://example.com/profile', {
    method: 'POST', // or 'PUT'
    headers: {
    'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then((response) => response.json())
    .then((data) => {
    console.log('Success:', data);
    })
    .catch((error) => {
    console.error('Error:', error);
    });

  5. upload multifiles using formData() method const formData = new FormData();
    const photos = document.querySelector('input[type="file"][multiple]');

    formData.append('title', 'My Vegas Vacation');
    let i = 0;
    for (const photo of photos.files) {
    formData.append(`photos_${i}`, photo);
    i++;
    }
    fetch('https://example.com/posts', {
    method: 'POST',
    body: formData,
    })
    .then((response) => response.json())
    .then((result) => {
    console.log('Success:', result);
    })
    .catch((error) => {
    console.error('Error:', error);
    });

  6. You can upload data as files when you're making HTTP requests with Async functions.

  7. you can send a request to consume data of an external API

    fetch('https://example.com', { credentials: 'include' });

Reference

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression


Contact me

📧Email me at iodaniel@byui.edu